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的{{1}}。我已经在函数中设置了0数据：

file

Answer 1

据我所知，您的尝试似乎基本没问题。错误可能出在您的const arr1 = [1,2,3,4,5]; const arr2 = [{'id':2, 'name':'A'},{'id':4, 'name':'B'}]; const ids = new Set(arr2.map(({ id }) => id)); const filtered = arr1.filter(num => !ids.has(num)); console.log(filtered);本身中。除了使用引用之外，您还可以通过简单地访问函数$ref中的传入事件来解决问题。您可以通过类似这样的方式来实现。

handleUpload()

这可能应该起作用。可以找到有效的示例here。

Answer 2

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

使用Vue和Axios上载多个文件

2 个答案: