VueJS：输入文件选择事件在选择同一文件时未触发答案

【问题标题】：VueJS: Input file selection event not firing upon selecting the same fileVueJS：输入文件选择事件在选择同一文件时未触发
【发布时间】：2019-06-05 02:29:51
【问题描述】：

我们如何文件输入检测 Vue Js 中 SAME 文件输入的变化

<input ref="imageUploader" type="file" @change="uploadImageFile">

【问题讨论】：

How to detect input type=file "change" for the same file?的可能重复
如果是同一个文件，这不是变化。一种选择是在单击输入时清除该字段，这样当他们选择文件时，它始终是change。
不是那个问题的重复，因为它在 jquery 中，而在 vuejs 中。两者都有不同的方式来访问这些字段。您在点击时清除该字段是正确的，因为我想在每次上传文件时触发更改事件

标签： vue.js vuejs2 onchange vuetify.js

【解决方案1】：

@zubair-0 和@grreeenn 的答案是完全有效的，在这里你可以有一个实现在处理上传的文件后用空字符串初始化输入值，因为只有在值改变时才会触发事件，你可以使用 Template Refs 在 Vue 3 中执行此操作。

<template>
  <input
      ref="imageUploader"
      type="file"
      class="custom-file-input"
      name="file-upload"
      accept="image/png, image/gif, image/jpeg"
      @change="uploadImageFile($event)"
    >
</template>
<script>
  import { ref } from 'vue'
  export default {
     setup() {
       const imageUploader = ref(null)
       const uploadImageFile = (event) => {
          console.log('File loaded...')
          // We initialize the input value, this is the trick
          imageUploader.value.value = ''
       }
       return {
         imageUploader,
         uploadImageFile
       }
   }
 }
</script>

【讨论】：

【解决方案2】：

我们可以添加@click事件，然后清除文件输入的值

<template>
    ....
        <input ref="imageUploader" type="file" accept=".jpg, .jpeg" @click="resetImageUploader" @change="uploadImageFile">
    ....
</template>

<script>
    export default {
        methods: {
            resetImageUploader() {
                this.$refs.imageUploader.value = '';
            },
            uploadImageFile() {
                ....
            }
        }
    }
</script>

【讨论】：

更简单 - 将 this.$refs.imageUploader.value = ''; 放在 uploadImageFile 方法的末尾 :)