在Vuetify组件v-file-input上选择同一个文件

Question

我正在使用 nuxt、vuetify 2.x 和 typescript 构建一个 Web 应用程序。

我想使用 v-file-input 上传文件，但在选择同一个文件时遇到了一些问题。

例如，当我选择某个文件然后关闭对话框而不保存它时， 我无法选择相同的文件（即@change 没有触发）

我尝试过的：

<v-file-input 
  accept="image/png, image/jpeg" 
  ref="imageUploader"
  @click="resetImageUploader"
  placeholder="upload image"
  prepend-icon="mdi-camera"
  @change="changeImage"
></v-file-input>

脚本：

 methods: {
    resetForm() {
      (this.$refs.form as HTMLFormElement).reset();
    },
    resetImageUploader() {
      (this.$refs.imageUploader as any).reset();
    },
}

（对话框关闭时调用resetForm()）

我尝试在点击输入表单时重置 imageuploader，但没有成功。

我尝试过(this.$refs.imageUploader as any).value = '' 而不是reset()，但没有成功。

顺便说一句，当我选择文件时，清除图标会像这样出现 如果我通过单击此图标清除表单，我可以选择相同的文件..

有人知道我该如何解决这个问题吗？

Answer 1

尝试像下面这样重置

<v-file-input 
  accept="image/png, image/jpeg" 
  ref="imageUploader"
  :value="internalVal"
  @click="resetImageUploader"
  placeholder="upload image"
  prepend-icon="mdi-camera"
  @change="changeImage"
></v-file-input>

脚本：

methods: {
    resetImageUploader() {
      this.internalVal = []
    },
}