vue.js - 如何在 vue.js 中将文件和数据附加到 FormData

Question

我正在尝试将上传的文件和数据值附加到 vue.js 中的 FormData。在我的 Controller 中，只能评估文件请求。

data() {
  return (
    file: '',
    categ: ''
  }
}

在我的方法中:

var form = new FormData();
var file = this.file;
var cat = this.categ;
form.append('pics', file, cat);

axios.post('/api', form, { headers:
  { 'Content-Type': 'multipart/form-data' }
}).then (res => console.log(res));  

我做错了什么？

Answer 1

问题是您可能如何从输入中获取文件。

如果您的输入如下所示:

<input type="file"  @change="upload($event)" id="file-input">

然后您会看到使用 $event 获取 file 并将其用作:

methods: {
  upload(event){
    let data = new FormData();
    let file = event.target.files[0];

    data.append('name', 'my-file')
    data.append('file', file)

    let config = {
      header : {
       'Content-Type' : 'multipart/form-data'
     }
    }

    axios.post('/api', data, config).then(
      response => {

      }
    )
  }
}