FileReader

• 객체로 웹 어플리케이션이 파일의 내용을 읽고 저장할 수 있게 해준다
• File 혹은 Blob 객체를 이용해 파일의 내용을 읽는다

Blob?

• Binary Large Object로 이미지나 비디오 등의 멀티데이터를 파일을 다룰 수 있는 객체
• 이진 데이터를 하나의 Entity로 관리할 수 있도록 도와준다
• 데이터에 간접적으로 접근하기 위한 객체

onload()

• 읽기 동작이 성공적으로 완료된 후 실행
• 비동기적으로 실행되어 callback을 넣어줘야한다

readAsDataURL()

• 콘텐츠를 Blob 객체를 사용해 읽는다
• 바이너리 파일을 Base64 Encode 문자열로 반환한다

const file = document.querySelector("input");
file.addEventListener("change", (e) => {
  const reader = new FileReader();

  reader.onload = (e) => {
	// 읽기 동작
  };

  // input 태그에서 FileList 객체를 받을 수 있다
  reader.readAsDataURL(e.target.files[0]); 
});

참고자료
https://developer.mozilla.org/ko/docs/Web/API/FileReader
https://developer.mozilla.org/ko/docs/Web/API/Blob