[JavaScript] File API(base64, blob, File, FileReader, FileList)

File API

• 단순 텍스트 데이터 뿐만 아니라 이미지, 오디오, 비디오 등의 대용량 바이너리 데이터를 다루기 위한 API이다.
• File API는 Blob, File, FileReader, FileList 객체로 구성

1. Blob: 주로 "파일 형태가 아닌" 바이너리 데이터(마이크 소리, canvas그림 등)를 다룬다.
2. File: Blob을 상속 받는 객체로, 주로 "파일 형태"의 바이너리 데이터(mp3, png 파일 등)를 다룬다.
3. FileReader: File이나 Blob에 저장된 바이너리 데이터를 읽어들이는 객체다.
4. FileList: HTML Input엘리먼트를 통해 입력 받은 파일(File객체 형태)들을 저장하는 유사배열객체다.

base64

• base64는 바이너리 데이터를 다루기 위해 텍스트(문자열) 형태로 저장한 포맷이다.
  • base64 포맷으로 이미지 바이너리 파일을 브라우저에서 표현하려면, FileReader 객체를 이용해 변환후 img 태그의 src 속성에 넣으면 가능하다.
  • 하지만 문자열이 굉장히 길어져 가독성이 안좋을 뿐만 아니라, base64 이미지를 이곳저곳 여러개 사용할 경우 결과적으로 용량 문제 때문에(33% 커진다) 문서 자체를 로딩하는데 많은 시간이 걸려 오히려 느려질수 있다는 단점을 지니고 있다.

Blob

• Binary Large Object의 약자로, 대용량 바이너리 데이터 객체를 의미한다.
• 바이너리 데이터를 다루기 때문에 텍스트 뿐만 아니라 이미지, 오디오, 비디오 데이터도 다룰 수 있다.

File

• 자바스크립트에서 파일을 다루기 위한 객체로 Blob을 상속 받는다.
• File은 Blob으로 할 수 있는 모든 것을 할 수 있으며, Blob을 요구하는 모든 곳(함수의 인자 등)에 사용될 수 있다.

FileReader

• File이나 Blob 객체가 저장하고 있는 바이너리 데이터를 비동기로 읽어 주는 객체

1. FileReader.prototype.readAsArrayBuffer(File | Blob)

   • File이나 Blob의 바이너리 데이터를 읽어서 ArrayBuffer로 반환

2. FileReader.prototype.readAsBinaryString(File | Blob)

   • File이나 Blob의 바이너리 데이터를 읽어서 String으로 반환

3. FileReader.prototype.readAsDataURL(File | Blob)

   • File이나 Blob의 바이너리 데이터를 읽어서 객체 URL로 반환

4. FileReader.prototype.readAsText(File | Blob)

   • File이나 Blob의 바이너리 데이터를 읽어서 텍스트로 반환

FileList

• File 객체 여러개를 담고 있는 유사배열객체(Array-like)이다.