Vue(7) 이미지업로드 삭제 후 같은 파일 다시 올리기

Vue.js 로 이미지업로드 기능을 만드는 중이다. x 버튼을 누르면 업로드한 파일이 삭제가 된다. 

그런데 삭제 후 같은 파일을 업로드 해봤더니 안올라가는 이슈가 발견되었다. 블로그를 뒤져 원인을 알아내었다.

1. 파일업로드 → 삭제→ 같은 파일 다시 올리기
2. 초기화까지는 되는데 같은 파일이 연속으로 안 올라가는 현상 발견
3. 파일 탐색기에서 업로드 할 파일을 선택해서 확인 버튼을 눌렀을 때 files 객체에 파일의 내용은 잘 저장된다.
4. 파일을 업로드할 때 앞의 내용과 같은 값이 들어와서 수행이 되지 않는 것이 아닐까???? 의심하게 됨
5. input element의 onchange 속성이 마음에 걸렸다.
6. 여기서 입력한 내용(업로드를 위해 선택한 파일들)이 사라지지 않고 앞의 내용과 비교해서 다르지않아 onchange에 도달하지 못한것이라 판단 초기화 해주기로 한다.

 

- HTML에서는

x 버튼 누르면 imageDelete1 메소드가 실행되며 이미지 삭제가 된다.

<div class="image-upload">
  // 이미지 업로드 버튼
  <button class="uplaod-button" @click="onUpload"> 
	<img :src="./assets/imgs/upload-input.png"/>
  </button>
  
  // 이미지 업로드 버튼을 누르면 uploadReady라는 변수가 true가 되면서 업로드기능이 활성화
  <input v-if="uploadReady" ref="files1" type="file" accept="image/*" style="display:none" @change="onInputImage1"/>
  
  // 이미지 url이 있으면 (이미 업로드를 해서 url이 있다면 미리보기 기능이 보인다)
  <div v-if="imageUrl1"> 
	<img :src="imageUrl1" class="image-input" />  		// 이미지 미리보기
	<button class="close-button" @click="imageDelete1">	// 이미지 삭제 버튼
	  <img :src="./assets/imgs/upload-close.png" />
	</button>
  </div>
</div>

 

- Data() 에서는

uploadReady 라는 상태변수를 선언해주자

 

-Method() 에서는

x 버튼 누르면 imageDelete1 () 가 실행되어 삭제가 구현되며 부모 컴포넌트로 데이터(inputFiles)가 전달된다.

문제는 삭제 후 같은 파일 업로드가 불가하다. (파일이 input 안에 남아있기 때문)

그래서 ! clearImage() 를 사용하여 나도 모르게 저장된 파일을 초기화 시켜준다.

 

이미지삭제 메소드

imageDelete1() {
  // 삭제로직 
  for (let i = 0; i < this.inputImages.length; i++) {
	if (this.temp1 === this.inputImages[i]) { 
	  this.imageUrl1 = null
	  this.tempDelete = this.inputImages.splice(i, 1)
	} 
  }
  // 파일초기화 메소드 
  this.clearImage() 
  // 'inputImage' 라는 이벤트를 통해 this.inputImages 데이터를 부모에게 올려준다.
  this.$emit('inputImage', this.inputImages) 
}  

 

이미지파일 초기화 메소드

clearImage() {
  // 이미지 업로드 기능을 비활성화(false)시킨다.
  this.uploadReady = false
  
  // 렌더링 되고 마지막에 실행이 되도록 $nextTick()을 사용한다.
  this.$nextTick(() => {
    this.uploadReady = true
  })
},

 

 

실행화면 

1. 이미지를 업로드 하고 x 버튼을 누르면 

2. 뿅하고 사진이 삭제된다.

 

3. 다시 업로드 하면 똑같은 이미지가 잘 올리간다.

 

 

ref : https://nagy.tistory.com/24