GS - File and FileReader

시작하기

File은 Blob을 상속 받는다.

new File(fileParts, fileName, [options]);
  • fileParts : Blob, BufferSource, String 값
  • fileName : 파일이름
  • options : 옵션(lastModified 와 같은 것)

파일은 input type file 을 통해서 받을 수 있고 그걸 가지고 조작도 가능하다.

name과 lastModified를 통해 속성값도 알 수 있다.

File은 다중 파일이 될 수 있으니 배열로 되어있다.

input.files[0]

FileReader

Blob이나 File로 된 데이터를 읽을 수 있는 객체이다.

let reader = new FileReader();

다양한 메서드들이 있다. 메서드명을 보고 얼추 추측이 가능하다.

  • readAsArrayBuffer(blob)
  • readAsText(blob, [encoding])
  • readAsDataURL(blob)
  • abort() : 명령 취소

그리고 각 리딩하는 처리 이벤트들이 있다. 이름만 봐도 다 알 수 있다.

  • loadstart
  • progress
  • load
  • abort
  • error
  • loadend

만약 리딩이 끝나면 reader.result, reader.error를 통해서 접근할 수 있다.

const readFile = (input) => {
    let file = input.files[0];

    let reader = new FileReader();

    reader.readAsText(file);

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

    reader.onerror = () => {
        console.log(reader.error);
    }
}

@kwonmory
성장을 위해 노력하고 있는 모리입니다.

깃허브