Vue3中如何在Firefox浏览器将文件输入的文件加入数组？

问题现象 #

用Vue3开发文件上传功能，选择文件添加到数组后渲染文件名，Chrome中正常，但Firefox里数组会被最后添加的文件覆盖——比如先选file-1，显示file-1；再选file-2，却显示两个file-1。

原因分析 #

问题出在$event.target.files这个FileList对象上：Firefox会复用同一个FileList实例，每次用户选择新文件时，这个实例的内容会被更新；而Chrome每次都会生成新的FileList实例。你直接把FileList对象push到数组里，存的是引用，所以数组里所有元素最终都指向最后一次更新的那个FileList，导致显示重复的文件名。

解决方案 #

不要直接pushFileList对象，而是把里面的单个文件提取出来存入数组，这样每个文件都是独立的引用：

修改方法代码 #

methods: {
  addFile(fileList) {
    // 将FileList转为数组，把单个文件推入files数组
    this.form.files.push(...Array.from(fileList));
  }
}

修改渲染代码 #

现在数组里存的是单个File对象，不再是FileList，所以渲染时直接取file.name，同时调整key避免重复（可以用索引加文件名保证唯一性）：

<div>
  <input @input="addFile($event.target.files)" type="file" name="" id="">
  <p v-for="(file, index) in form.files" :key="index + file.name">
    {{ file.name }}
  </p>
</div>

内容的提问来源于stack exchange，提问作者raf1kkk