使用 Vue 和 Axios 上传多个文件

Question

我在使用 Axios 在 Vue 中上传多个文件时遇到了一些问题。问题是 FileList 总是 returns 长度为 0，即使我 select 有多个文件。

我有一个打开文件上传的按钮：

<v-icon @click="attachFile(user)">fas fa-paperclip</v-icon>

它调用的函数：

attachFile(user) {
  document.getElementById(user.id).click();
},

它所指的表单输入：

 <input
    :id="item.id"
    name="files[]"
    type="file"
    multiple
    hidden
    ref="files"
    @change="handleUpload()"
 />

然后在 handleUpload() 中，我想调用 axios 来上传文件。

handleUpload() {
  this.files = this.$refs.files.files;
  console.log(this.files);
},

但是this.files总是returns一个长度为0的FileList。我已经在函数中设置了 file 数据：

 data: () => ({
    files: "",
  })

Answer 1

据我所知，你的尝试基本上没有问题。错误可能出在您的 $ref 本身。您可以通过简单地访问函数 handleUpload() 中传入的事件来解决您的问题，而不是使用引用。您可以通过这样的方式实现。

handleUpload(e) {
  console.log(e.target.files);
}

这应该可行。可以找到一个工作示例 here.

Answer 2

也许这会对某人有所帮助（不是对作者，因为我看到他避免了我的错误）。我使用了事件 'click'，但必须使用 'change' 事件。这东西偷走了我几个小时。

Multiple file upload with Vue and Axios