Question

我们如何通过文件输入来检测Vue Js中相同文件输入的变化

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

Answer 1

    We can add @click event and then clear the value of the file 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 和 @grreeenn 的答案是完全有效的，在这里您可以有一个实现，在处理上传的文件后用空字符串初始化输入值，因为该事件仅在值已更改，您可以在 Vue 3 中使用 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：选择相同文件时未触发输入文件选择事件

2 个答案: