vue3 input[type=“file“] change事件第二次不触发

在 Vue3 中，`<input type="file">` 的 `change` 事件通常用于处理文件上传，当你第一次选择文件后，该事件会被触发。然而，如果用户直接取消了选择文件的操作（例如点击取消按钮或者按回退键），或者用户清空了所选文件，`change` 事件在再次触发前会有一个短暂的间隔。

如果你发现 `change` 事件在第二次选择时不触发，可能是由于浏览器的这种默认行为导致的。解决这个问题的一个常见做法是在 `change` 事件处理器内部添加一个条件判断，检查文件是否为空，如果是，则延迟一段时间再重新监听一次：

<input @change="handleFileChange" :ref="fileInputRef" type="file">
...
methods: {
  handleFileChange(e) {
    const file = e.target.files[0];
    
    if (!file || !file.size) {
      this.$nextTick(() => {
        // 如果文件为空，延时重新监听
        this.fileInputRef.value.click();
      });
    } else {
      // 正常处理文件
      ...
    }
  },
}

在这个例子中，我们使用了 Vue 的 `$nextTick` 来确保在 DOM 更新完成后重新尝试触发 `change` 事件。如果还有其他特殊情况，可能需要考虑使用 Promise 或者其他方法来处理延迟。