Question

在附件中，您可以看到我的代码。我希望能够一次提交发送更多图像。我正在使用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);
},

Answer 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]);
    },
...

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

1 个答案: