[JavaScript] 이미지 파일 업로드 하기 [JS기초 함수] - 띵코딩 on Code

FileReader 객체란?

FileReader는 웹페이지 상에 파일을 업로드하여 파일의 내용을 보여주는데 도움을 주는 객체이다. 세부적으로는 웹 어플리케이션이 비동기적으로 데이터를 읽기 위하여 파일을 가리키는 File 혹은 Blob 객체를 이용해 파일의 내용을 읽고 사용자의 컴퓨터에 저장하는 것을 가능하게 해준다.
여기서 File객체는 input 태그를 이용하여 유저가 선택한 파일들의 결과로 반환된 FileList 객체 정보를 제공한다.

 

FileReader 생성자 구문

var reader = new FileReader(); // reader는 FileReader 속성, 이벤트, 메서드를 사용할 수 있다.

 

FileReader 속성

FileReader.error

파일을 읽는 도중에 발생한 에러를 나타낸다.

const reader = new FileReader();

console.log(reader.error); // 현재는 에러가 없기에 null​

 

FileReader.readyState

FileReader의 상태를 나타내는 숫자
- EMPTY : 0 : 아직 데이터가 로드 되지 않았음.
- LOADING : 1 : 데이터가 로딩 중.
- DONE : 2 : 모든 읽기 요청이 완료됨.

const reader = new FileReader();
console.log(reader.readyState); // EMPTY : 0
      
reader.readAsDataURL(e.target.files[0]);
console.log(reader.readyState); // LOADING : 1

reader.onload = (e) => {
   console.log(reader.readyState); // DONE : 2
};​

 

FileReader.result

파일의 컨텐츠이다. 이 속성은 읽기작업이 완료된 후에만 사용 가능하다. 데이터의 형식은 읽기 작업에 사용된 함수에 의해 결정된다.

const input = document.querySelector(".input");

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

      reader.readAsDataURL(e.target.files[0]);

      reader.onload = (file) => {
        console.log(file.target.result);
      };
    });​

base64 인코딩 된 스트링 데이터

 

FileReader 이벤트

FileReader.onerror

파일 읽기 동작에서 에러가 생길때마다 발생하는 이벤트이다.

addEventListener("error", (event) => {});

onerror = (event) => {};​

 

FileReader.onload

파일 읽기 동작이 성공적으로 완료되었을 때 발생하는 이벤트이다.

addEventListener("load", (event) => {});

onload = (event) => {};​

 

FileReader 메서드

FileReader.readAsDataURL()

 이 메서드는 컨텐츠를 특정 Blob이나 File에서 읽어 오는 역할을 한다. 읽기 작업이 끝나는 경우에 readyState의 상태가 DONE이 되며 loaded이벤트가 트리거 된다.
base64 인코딩 된 스트링 데이터가 result 속성에 담겨 진다. 이미지 데이터를 전달하기위해 꼭 필요한 메서드이다.

const input = document.querySelector(".input");

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

      reader.readAsDataURL(e.target.files[0]); //File객체의 리스트로부터 데이터를 받는다.

      reader.onload = (file) => {
        console.log(file.target.result);
      };
    });​

 

FileReader.readAsText()

 이 메서드는 컨텐츠를 특정 Blob이나 File에서 읽어 오는 역할을 한다. 읽기 작업이 끝나는 경우에 readyState의 상태가 DONE이 되며 loaded이벤트가 트리거 된다. result프로퍼티는 파일의 내용을 텍스트 문자열로 가진다.

function printFile(file) {
  const reader = new FileReader();
  reader.onload = (evt) => {
    console.log(evt.target.result);
  };
  reader.readAsText(file);
}​