Vue 간단하게 이미지 미리보기 만들어보기 (Base64, FileReader)

 

 

 

 

예제 보기

 

 

 

 

 

 

코드 내용

 

 

<template>
  <div>
    <h3>파일 첨부</h3>
    <input @change="handleImgUpload" type="file" accept="image/*" />
    <h3>미리보기</h3>
    <img id="preview" />
  </div>
</template>

<script setup>
const handleImgUpload = (e) => {
  var reader = new FileReader();
  reader.readAsDataURL(e.target.files[0]);
  reader.onload = (e) => {
    /* 업로드한 파일 정보를 Base64를 이용해서 이미지로 보여주기 */
    document.getElementById('preview').src = e.target.result;
  };
};
</script>

 

 

 

 

 

코드 설명

 

핵심

 

FileReader 객체의 readAsDataURL() 라는 함수에 매개 변수로 파일 객체를 넘겨서

업로드된 파일 객체의 정보를 Base64로 재작성(인코딩)하고, 해당 정보를 이미지 태그 src 속성에 넣어주면 끝 !

 

 

FileReader

 

이름에서 유추할 수 있듯이 파일을 읽는 역할을 해서 FileReader라는 이름이 붙었다.

주로 업로드된 이미지 파일 미리보기용도로 간단하게 쓸 때 유용하다 👍

 

 

업로드하려는 이미지의 내용을 Base64 방식으로 재작성(인코딩)해서, src 속성에 넣으면 이미지가 나온다 !

 

 

FileReader 진행 단계에 대한 훅(Hook) 기능들

 

<script setup>
const handleImgUpload = (e) => {
  var reader = new FileReader();
  reader.readAsDataURL(e.target.files[0]);
  reader.onloadstart = () => {
    console.log("진행 시작");
  };  
  reader.onprogress = () => {
    console.log("진행중");
  };
  reader.onload = (e) => {
    /* 업로드한 파일 정보를 Base64를 이용해서 이미지로 보여주기 */
    console.log("업로드 성공했을때만 실행");
    document.getElementById('preview').src = e.target.result;
  };
  reader.onloadend = ( ) => {
    console.log("업로드 성공 여부와 관계없이 업로드 진행이 종료되었을때");
  };    
  reader.onabort = ( ) => {
    console.log("업로드 진행중 취소되었을때");
  };    
  reader.onerror =  ( ) => {
    console.log("업로드 진행중 오류가 발생했을때");
  };    
};
</script>

 

 

 

onLoad 이벤트 내용을 이렇게 바꿀 수도 있다

 

// reader.onload = (e) => {
//   /* 업로드한 파일 정보를 Base64를 이용해서 이미지로 보여주기 */
//   console.log("업로드 성공했을때만 실행");
//   document.getElementById('preview').src = e.target.result;
// };

reader.onload = ( ) => {
  /* 매개변수를 안받고, reader 객체의 result 속성 값을 사용할 수도 있다. */
  console.log("업로드 성공했을때만 실행");
  document.getElementById('preview').src = reader.result;
};

 

 

 

 

 

 

참고 문서

 

https://developer.mozilla.org/ko/docs/Web/API/FileReader/readAsDataURL

FileReader.readAsDataURL() - Web API | MDN