Vuetify v-file-input选中相同文件@change不触发该如何解决？

原生<input type="file">的change事件仅在选中文件与当前控件存储的文件值不一致时才会触发。你之前尝试的重置方法仅修改了Vuetify组件上层的状态值，没有同步清空底层原生input元素的value，因此浏览器判定值未发生变化，不会触发@change事件。手动点击组件自带的清除图标时，Vuetify的内部逻辑会同时清空组件绑定值和原生input的value，因此可以正常重复选择同一文件。

方案1：主动清空原生input值（推荐用于小范围重置） #

修改重置逻辑，在调用组件reset方法的同时，手动清空底层原生input的value：

resetImageUploader() {
  const uploader = this.$refs.imageUploader as any
  // 清空Vuetify组件上层状态
  uploader.reset()
  // 找到底层原生input元素清空value
  const nativeInput = uploader.$el.querySelector('input[type="file"]') as HTMLInputElement
  if (nativeInput) {
    nativeInput.value = ''
  }
}

调用时机选择：

• 优先在弹窗关闭的回调中调用该方法，避免点击上传组件时误清已选内容
• 如果需要点击上传组件时自动重置，可以将原@click改为@click.native.capture，保证重置逻辑在文件选择弹窗打开前执行

方案2：用key强制重新渲染组件（无DOM操作，更符合Vue规范） #

给v-file-input绑定动态key，每次弹窗打开时更新key值，让组件强制重新渲染，天然清空所有历史状态：
模板代码：

<v-file-input 
  accept="image/png, image/jpeg" 
  :key="uploaderKey"
  placeholder="upload image"
  prepend-icon="mdi-camera"
  @change="changeImage"
></v-file-input>

脚本代码：

data() {
  return {
    uploaderKey: 0
  }
},
methods: {
  // 弹窗打开时调用该方法
  onModalOpen() {
    this.uploaderKey += 1
  }
}

该方案不需要操作DOM，也不会出现类型兼容问题，通用性更强。

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