[Vue js] File upload(preview)

Vue js에서 이미지 파일을 선택 했을 때 미리보기 하는 방법

1. input tag(type="file") 구현

input tag를 file type으로 생성하면 파일선택 이라는 버튼이 생성된다. 이 버튼을 없애고 업로드 아이콘을 선택하면 파일 선택창이 나오도록 구현 하였다.

<div>
	<input type="file" id="upload-image" hidden/>
  <label for="upload-image">
    <img src="@/assets/images/icon_upload.png" />
  </label>
</div>

위의 코드와 같이 file type의 <input>에 id="upload-image" id값을 주고, <label>에 결합 될 수 있도록 id값과 똑같이 for="upload-image"로 설정해 준다. <input>는 hidden 옵션으로 숨긴다.
그리고 <label> 안에 <img>테그를 넣어 이미지를 선택하면, 파일 선택창이 나오게 된다.

2. @change 이벤트

업로드 하고자 하는 이미지를 선택했다면 이 때 change 이벤트가 발생한다. <input>에 @change="getFileName($event.target.files)"를 추가하여 change 이벤트가 발생하였을 때 getFileName()함수가 실행되도록 한다. 인자 값으로는 이벤트가 발생한 대상의 객체 즉, 파일 객체를 넣어준다.

<input type="file" id="upload-image" hidden @change="getFileName($event.target.files)"/>

3. getFileName($event.target.files)

이 함수는 업로드한 파일객체에서 파일명을 base64() 함수에 인자 값으로 넣어준다.

async getFileName(files) {
  this.fileName = files[0]
  await this.base64(this.fileName)
},

4. base64(file)

인자 값으로 파일명을 받아 FileReader() 객체를 생성하여 파일을 읽고, 성공적으로 읽었다면 .onload 메서드를 통해 썸네일을 보여주고자 하는 dom에 접근하여 base64로 인코딩된 이미지 데이터를 전달한다.

base64(file) {
  // 비동기적으로 동작하기 위하여 promise를 return 해준다.
  return new Promise(resolve => {
    // 업로드된 파일을 읽기 위한 FileReader() 객체 생성
    let a = new FileReader()
    // 읽기 동작이 성공적으로 완료됐을 때 발생
    a.onload = e => {
      resolve(e.target.result)
			// 썸네일을 보여주고자 하는 <img>에 id값을 가져와 src에 결과값을 넣어준다.
      const previewImage = document.getElementById('preview')
      previewImage.src = e.target.result
    }
		// file 데이터를 base64로 인코딩한 문자열. 이 문자열을 브라우저가 인식하여 원래 데이터로 만들어준다.
    a.readAsDataURL(file)
  })
}

5. 결과

1. input tag의 type을 file로 하고, label tag안에 <img>를 넣어 <input>에서 발생하는 이벤트를 적용시킴. 그리고 input tag는 hidden옵션으로 숨김.
2. 이미지를 선택하면 change이벤트가 발생하고, 이때 getFileName($event.target.files) 함수를 실행시킴.
3. base64(files)함수에 파일 명을 인자값으로 넘기고 base64로 인코딩하여 결과를 보여주고자 하는 <img>에 접근하여 결과를 보내준다.