如何使用 Javascript 和 Axios formdata 上传多个图像/文件答案

【问题标题】：How to upload multiple images/files with Javascript and Axios formdata如何使用 Javascript 和 Axios formdata 上传多个图像/文件
【发布时间】：2018-11-21 09:42:08
【问题描述】：

在附件中你可以看到我的代码。我希望能够从一次提交中发送更多图像。我正在使用 Vue.js、Axios 和 Vanilla JS。以什么方式？我当前的代码工作得很好，我想要一种以这种方式添加多个图片/文件的方法，即提交时的图片。

<div @drop="onDropFile($event)">
<label> Choose or drag file </label>
<input
   type="file"
   name="profile_image"
   @change="onChangeFile($event)">
</div>


onDropFile(e) {
      e.stopPropagation();
      e.preventDefault();
      let files = e.dataTransfer.files;
      this.createFile(files[0]);
    },

onChangeFile(e) {
  let files = e.target.files;
  this.product_image_data = e.target.files[0]
  this.createFile(files[0]);
},
createFile(file) {
  if (!file.type.match("image.*")) {
    alert("Select an image");
    return;
  }
  let reader = new FileReader();
  let vm = this;
  reader.onload = function(e) {
    vm.profile_image = e.target.result;
  };
  reader.readAsDataURL(file);
},

【问题讨论】：

标签： javascript vue.js axios multipartform-data form-data

【解决方案1】：

你能检查一下这个laracast 解决方案吗

...
data() {
    return {
        postFormData: new FormData(),
    };
},

methods: {
    onFileChange(event) {
        let files = e.target.files;          
        this.postFormData.append('images[]',files[0]);
        this.createFile(files[0]);
    },
...

【讨论】：

我的逻辑有点不同，但我试试这个