Vue2中input:file的change事件相同文件只会触发一次

input:file 元素的 change 事件只会在用户选择不同文件时触发。如果用户选择相同的文件，事件不会再次触发，因为浏览器认为文件没有更改。

如果你想要强制触发 change 事件，无论用户选择的文件是否相同，你可以尝试以下方法：

方法1.

使用 key 属性： Vue允许你通过给组件的元素添加 key 属性来强制重新渲染。你可以将这一思路应用到 input:file 元素上，以便在用户选择相同文件时重新渲染该元素，从而触发 change 事件。

<template>
  <input
    type="file"
    ref="fileInput"
    :key="fileInputKey"
    @change="handleFileChange"
  />
template>
 
<script>
export default {
  data() {
    return {
      fileInputKey: 0
    };
  },
  methods: {
    handleFileChange() {
      // 处理文件选择
    }
  }
};
script>

在上面的示例中，每当你想强制触发 change 事件，只需递增 fileInputKey 的值即可。

方法2.

通过重置 input:file 的值： 另一种方法是通过JavaScript代码重置 input:file 元素的值，这将导致 change 事件重新触发。你可以使用 ref 引用来访问 input:file 元素。

<template>
  <input
    type="file"
    ref="fileInput"
    @change="handleFileChange"
  />
template>
 
<script>
export default {
  methods: {
    handleFileChange() {
      // 处理文件选择
 
      // 重置input:file的值
      this.$refs.fileInput.value = '';
    }
  }
};
script>

这将清空 input:file 的值，使用户可以再次选择相同文件并触发 change 事件。

End-------------------------------------------------------