[Vue.js] <input type="file"> 요소에 동일 파일 연속 선택 시, change 이벤트가 발생되지 않는 문제 해결 방법

안녕하세요.

최근에 드래그 앤 드롭 파일 업로드 기능을 추가하다가 파일 업로드 컴포넌트에 있던 오류를 발견해서 수정한 경험이 있어서 공유를 해보려고 합니다😀

 

 

오류 내용은 아래와 같았어요.

 

파일 업로드 오류

1. 파일A 선택 → <input> 요소의 change 이벤트 발생

2. 파일A 삭제

3. 파일A 선택 → <input> 요소의 change 이벤트 발생 안됨❗️

 

 

stackoverflow에 찾아보니, 같은 파일을 다시 선택할 경우 input value가 변경된 게 아니기 때문에 change 이벤트가 발생되지 않는 게 정상이라고 하더라구요.

해결 방법은 파일이 선택된 후 처리해줄 로직이 끝난 뒤에, input 요소의 value 값을 비워주면 된다고 합니다.

 

해결방법

<template>
  <input
      ref="imageUploader"
      type="file"
      @change="uploadImageFile($event.target)"
    >
</template>
<script>
export default {
  methods: {
    uploadImageFile(target) {
      // 파일 업로드 후 처리 할 로직...
      
      // 솔루션: input 요소 값 초기화
      this.$refs.imageUploader.value = ''
    },
 }
</script>

 

input 요소의 value 값을 ''으로 초기화해주면, 같은 파일을 재 업로드할 경우에도 change 이벤트가 정상적으로 발생되어서 재 업로드가 가능합니다👍 👍

 

 

참고

• https://developer.mozilla.org/ko/docs/Web/HTML/Element/Input/file
• https://stackoverflow.com/questions/54124977/vuejs-input-file-selection-event-not-firing-upon-selecting-the-same-file