정의
FileReader는 웹 애플리케이션이 비동기적으로 데이터를 읽기 위하여 읽을 파일을 가리키는 File 혹은 Blob 객체를 이용해 파일의 내용을(혹은 raw data버퍼로) 읽고 사용자의 컴퓨터에 저장하는 것을 가능하게 해준다.
메서드
FileReader 객체를 생성한 후 이용하는 메서드
- readAsText(file, [encoding])
주어진 인코딩( utf-8기본값)을 사용하여 데이터를 텍스트 문자열로 읽는다.
- readAsDataURL(blob)
바이너리 데이터를 읽고 base64 데이터를 url로 인코딩 한다.
비동기로 실행된다.
- readAsArrayBuffer(blob)
이진 형식으로 데이터를 읽는다.
- readAsBinaryString
- onload()
읽기 동작이 성공적으로 완료되었을 때마다 발생한다. (결과를 처리하는 메소드)
비동기이므로 원하는 동작을 위해 콜백 함수를 이용하는 것이 좋다
- abort()
작업을 취소한다
이벤트
- loadstart : 로딩이 시작.
- progress: 읽는 동안 발생.
- load : 오류 없음, 읽기 완료.
- abort : abort()
- error : 오류가 발생.
- loadend : 읽기는 성공 또는 실패.
읽기가 완료되면
- reader.result : 결과
- reader.error : 오류
가장 널리 사용되는 이벤트는 확실 load하고 error.
사용
new FileReader(fileParts, fileName, [options])
- fileParts– Blob/BufferSource/String 값의 배열.
- fileName– 파일 이름 문자열.
- options– 선택적 객체:
- lastModified– 마지막 수정의 타임스탬프(정수 날짜).
<input type="file" onchange={readFile}/>
const readFile = e => {
const reader = new FileReader();
const file = e.target.files[0];
alert(`File name: ${file.name}`);
alert(`Last modified: ${file.lastModified}`);
}
File()
file 객체의 새로운 인스턴스를 생성
new File(bits, name, [potions])
- bits
file 객체 내에 저장할 데이터를 나타내는 배열
ArrayBuffer, ArrayBufferView (en-US), Blob, 문자열을 요소로 제공할 수 있다
- name
파일의 이름이나 경로를 나타내는 문자열
- options
파일 특성을 추가로 지정할 수 있는 옵션 객체
- type: 파일 내용의 MIME 유형을 나타내는 문자열, 기본값은 빈 문자열("")
- lastModified: 파일이 마지막으로 변경된 시간.
Unix 시간에서부터 경과한 밀리초 정수로 지정해야 한다. 기본값은 Date.now()와 같다.
const imageFile = new File(
[blob],
compressedFile.name,
{ type: 'image/jpeg', lastModified: Date.now() });