VueJS: 동일한 파일을 선택해도 입력 파일 선택 이벤트가 발생하지 않습니다.

VueJS: 동일한 파일을 선택해도 입력 파일 선택 이벤트가 발생하지 않습니다.

파일 입력이 Vue Js에서 동일한 파일 입력에 대한 변경을 감지하려면 어떻게 해야 합니까?

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

@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 및 @grreeen의 답변은 완전히 유효합니다.여기에서는 값이 변경되었을 때만 이벤트가 발생하므로 업로드된 파일이 처리된 후 빈 문자열로 입력 값을 초기화하는 구현을 수행할 수 있습니다.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>

언급URL : https://stackoverflow.com/questions/54124977/vuejs-input-file-selection-event-not-firing-upon-selecting-the-same-file