上传相同文件名时忽略文件输入更改事件答案

【问题标题】：file input change event is ignored when same filename is uploaded上传相同文件名时忽略文件输入更改事件
【发布时间】：2020-11-02 14:58:16
【问题描述】：

我是我的 Vue.js 应用程序，我正在使用 Vuetify 的 v-file-input 组件。上传的文件绑定到formData.file，我通过rules 属性验证上传的文件。

<v-file-input
  :rules="fileValidationRules"
  v-model="formData.file"
/>

如果我上传一个文件/tmp/foo.txt，一切正常，但是，如果我更改此文件的内容并再次上传，fileValidationRules 不会被调用。

显然原因是因为Chrome does not trigger the change event if the file name is the same。有什么方法可以解决这个问题，以确保用户选择的每个文件都绑定到formData.file 并调用fileValidationRules？

【问题讨论】：

【解决方案1】：

您可以将文件输入的值设置为空。

<v-file-input
  :rules="fileValidationRules"
  v-model="formData.file"
  ref="file"
/>

onClick() {
   this.$refs.file.value = null;
}

【讨论】：

【解决方案2】：

在每个 onclick 事件上将输入的值设置为 null。即使选择了相同的路径，这也会重置输入的值并触发 onchange 事件。

input.onclick = function () {
    this.value = null;
};

input.onchange = function () {
    alert(this.value);
};

【讨论】：