VueJS：输入文件选择事件不会在选择相同文件时触发

Question

我们如何在 Vue Js 中检测文件输入对相同文件输入的更改

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

Answer 1

我们可以添加@click事件，然后清空文件input的值

<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>

Answer 2

@zubair-0 and @grreeenn's answers are totally valid, Here you can have an implementation initializing the input value with an empty string after the uploaded file is processed because the event only is fired when the value changed, you can do this in Vue 3 using the Template Refs.

<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>

VueJS：输入文件选择事件不会在选择相同文件时触发

VueJS: Input file selection event not firing upon selecting the same file

onchange

vue.js

vuejs2

vuetify.js