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

Question

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

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

Answer 1

我们可以添加@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>

Answer 2

与@zubair的答案相同，但对于

vue 3

并且更方便一点：

<input type="file" @change="renderImage($event)" @click="$event.target.value=''">

Answer 3

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

Answer 4

我用钥匙修复它。例如

希望对你有帮助

Answer 5

如果有人在使用

Vue 3 时遇到同样的问题，我可以通过直接在 @click

 的 

<input>

 中添加事件管理来解决它： 

@click="$event.target.value = ''"

<input slot="input" type="file" @change="doSomething($event)" @click="$event.target.value = ''"/>