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

【问题标题】：How to append files and data to FormData in vue.js如何在 vue.js 中将文件和数据附加到 FormData
【发布时间】：2018-11-20 22:52:51
【问题描述】：

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

    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)});

我做错了什么？

【问题讨论】：

在form.append('pics', file, cat);中，第三个参数cat是文件名。

标签： vue.js

【解决方案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 => {

      }
    )
  }
}

【讨论】：

谢谢@samayo ..我实际上能够在我的后端访问该文件。但是，我需要将另一个名为“cat”的数据值与文件一起发送到后端。我是否以与您添加“名称”和“文件”相同的方式附加它？
也不知道附加接受的文件名。我想你可以像在你的代码中那样在一个追加中做到这一点。但是cat应该是一个文件名
您可以从@change="upload($event)" 中删除$event。如果您没有传递任何内容，该方法将默认在第一个参数中捕获事件。
啊，不错，谢谢。我会保持原样，但它不会让新来者感到困惑。你怎么看？

【解决方案2】：

这里是多文件上传的解决方案。不要忘记为每个 formData 对象添加唯一 ID。

<input type="file" multiple :disabled="isSaving" @change="filesChange($event.target.files)" accept="your_format_here" class="input-file">

这里是axios 方法和我们的formData 对象的创建。

  methods: {
    async save(datafile) {
      // upload data to the server
      return await axios.post(
          store.state.endpoints.baseURL + "upload/url/",
          datafile, {
            headers: {
              Authorization: 'Bearer ' + store.state.jwt
            }
          }
        )
        .then(response => {
          console.log(response)
        })
        .catch(err => {
          console.log(err.response)
        });
    },
    filesChange(fileList) {
      const formData = new FormData();
      if (!fileList.length) return;
      for (var i = 0; i < fileList.length; i++) {
        let file = fileList[i];
        // Here we create unique key 'files[i]' in our response dict
        formData.append('files[' + i + ']', file);
      }
      this.save(formData);
    }
  },

【讨论】：