Chrome/Safari下Vue文件上传组件删除后重加同文件数组不更新

问题根因 #

这不是Vue响应性问题，是原生<input type="file">的浏览器默认行为差异导致的：

• Chrome、Edge等主流浏览器中，若两次选择的是同一个文件，input的value属性没有发生变更，不会触发change事件，你的addFiles方法根本没有执行，自然不会把文件写入files数组
• Firefox对file输入框的change事件触发逻辑做了差异化实现，所以同文件二次选择可以触发，才会表现正常

修复方案 #

只需要在每次读取完文件内容后，清空input的value值即可，保证后续哪怕选择相同文件，也会因为value从空变为非空触发change事件：
修改后的addFiles方法如下：

addFiles() {
  this.files = [...this.$refs.fileUpload.files];
  // 新增：清空文件输入框的值，解决同文件二次选择无法触发change的问题
  this.$refs.fileUpload.value = '';
},

可选优化项 #

你当前用index作为v-for的key，在数组元素删除后会出现索引错位，可能导致意料之外的渲染异常，建议替换为文件的唯一标识：

<div class="file-list__file" v-for="(file, index) in files" :key="`${file.name}-${file.lastModified}`">

修改后即可全浏览器兼容正常使用。

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