Vue中文件选择change事件仅触发一次的解决方法

浏览器的文件选择框默认逻辑是：只有当选中的文件路径发生变化时才会触发change事件。如果重复选择同一个文件，路径未改变，事件就不会触发。以下是几种可行的修复方法：

方法一：处理完文件后清空input的value #

在update方法执行完毕后，将input的value设为空字符串，重置其状态。这样即使重复选择同一个文件，也会因为路径从空变为有效值而触发change事件。

<input type="file" @change="update" />

<script>
export default {
  methods: {
    async update(event) {
      const formData = new FormData()
      formData.append('file', event.target.files[0]);
      console.log("Call event", event)
      
      // 重置input状态
      event.target.value = ''
    }
  }
}
</script>

方法二：使用v-if强制重新渲染input #

通过切换v-if的状态，让Vue销毁并重新创建input元素。新创建的input每次点击都会处于初始状态，自然能触发change事件。

<input type="file" @change="update" v-if="showFileInput" />

<script>
export default {
  data() {
    return {
      showFileInput: true
    }
  },
  methods: {
    async update(event) {
      const formData = new FormData()
      formData.append('file', event.target.files[0]);
      console.log("Call event", event)
      
      // 先隐藏再重新显示，触发组件重建
      this.showFileInput = false
      this.$nextTick(() => {
        this.showFileInput = true
      })
    }
  }
}
</script>

方法三：监听click事件提前重置 #

在点击文件选择框时就重置value，确保每次选择前input都是空状态，无论选择新文件还是重复文件都能触发change事件。

<input type="file" @change="update" @click="resetFileInput" />

<script>
export default {
  methods: {
    resetFileInput(event) {
      event.target.value = ''
    },
    async update(event) {
      const formData = new FormData()
      formData.append('file', event.target.files[0]);
      console.log("Call event", event)
    }
  }
}
</script>

推荐方案 #

方法一逻辑最简洁，无需额外状态管理，也不会产生组件重建的开销，是优先推荐的解决方式。

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