업로드한 이미지 미리보기

이 글에서 file reader를 활용한 방법을 포스팅해주셔서 참고했다.

 

일단, 이전의 포스팅한 드래그 앤 드롭 업로드를 통해서 미리보기 이미지까지 구현해볼 것이다.

 

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

FileReader - Web API | MDN

 

공식 문서에 따르면, FileReader는 비동기처리를 지원한다. 때문에 이벤트 핸들러를 통해서 데이터 처리를 알려주는 것 같다.

그래서 블로그의 글의 예시를 기반으로해서 만든 코드

const reader = new FileReader();
reader.onload = ({ target }) => {
  img.setAttribute("src", target.result);
  document.querySelector("body").appendChild(imgTag);
};
reader.readAsDataURL(e.dataTransfer.files[0]);

여기서 reader에 onload 이벤트 리스너를 달아주고 있다. 공식 문서대로 비동기처리니까, 이걸 들어야하는 것!

 

 

---

어떻게 생긴지 궁금해서 찾아보기 시작했다.

우선 result가 너무 궁금했음..

파일리더로 변환된 결과는 base64로 디코딩되어 메모리상에서 저장되는 것 같다..