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

Question

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

- zubair-0

---

可能是如何检测相同文件的input type=file“change”？的重复问题。 - Rwd

如果是同一个文件，那就不算是更改。一种选择是在单击输入时清除字段，这样当他们选择文件时，它总是会被视为“更改”。 - Rwd

你说得对，因为我想在每次上传文件时触发更改事件，所以要在单击时清除字段。这与jQuery不同，因为它们使用不同的方式访问字段。 - zubair-0

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>

- zubair-0

---

更简单的做法是在uploadImageFile方法的结尾处添加一行代码：this.$refs.imageUploader.value = ''; :) - grreeenn

Answer 2

和 @zubair 的答案一样，但对于 vue 3 更加方便:

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

- Artur Müller Romanov

Answer 3

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

- hermeslm

Answer 4

我用钥匙修好它。例如。

希望这对你有所帮助。

- Sergey