vue.js - 使用 Vue 和 Axios 上传多个文件

Question

我在使用 Axios 在 Vue 中上传多个文件时遇到了一些问题。问题是 FileList 总是返回一个长度0，即使我选择了多个文件。

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

<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总是返回一个FileList长度为0. 我已经file在函数中设置了数据：

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

score 3 · Accepted Answer

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

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

这应该可以工作。可以在这里找到一个工作示例。

score 1 · Accepted Answer

也许这会对某人有所帮助（不是为了作者，因为我看到他避免了我的错误）。我使用了“点击”事件，但必须使用“更改”事件。这件事从我身上偷走了几个小时。

2 回答 2