자바스크립트의 FileReader
클래스는 웹 애플리케이션에서 파일을 읽을 수 있는 기능을 제공한다. 이 클래스는 파일 시스템에 접근하지 않고도, 사용자가 선택한 파일을 비동기적으로 읽어 들여 다양한 형태로 처리할 수 있게 한다. FileReader
는 특히 파일 업로드와 관련된 기능을 구현할 때 유용하다.
- 메서드
readAsText(file)
: 파일을 텍스트로 읽는다.readAsDataURL(file)
: 파일을 데이터 URL(Base64)로 읽는다.readAsArrayBuffer(file)
: 파일을 ArrayBuffer로 읽는다.readAsBinaryString(file)
: 파일을 바이너리 문자열로 읽는다. (비권장)
- 속성
result
: 파일 읽기가 완료되면 읽은 데이터가 저장된다.onloadstart
: 파일 읽기가 시작될 때 호출된다. 보통 로딩 애니메이션을 시작할 때 사용한다.onprogress
: 파일을 읽는 동안 주기적으로 호출된다. 파일의 읽기 진행률을 표시할 때 유용하다.onload
: 파일 읽기가 완료되면 호출된다. 이때 reader.result에 읽어들인 데이터가 저장된다.onerror
: 파일 읽기 중 에러가 발생하면 호출된다.onabort
: 파일 읽기가 중단되면 호출된다.
사용 예제
/**
* 이미지 파일을 읽어서 base64 인코딩된 문자열로 반환한다.
*
* @param {Blob} file - 읽을 이미지 파일
* @returns {Promise<string>} 이미지 파일의 base64 인코딩된 문자열을 반환하는 Promise
*/
export const imageFileReaderP = (file: Blob) =>
new Promise<string>((resolve, reject) => {
const fileReader = new FileReader();
// 파일을 성공적으로 읽었을 때의 이벤트 핸들러
fileReader.onload = (e: ProgressEvent<FileReader>) => {
const result = e.target?.result;
// 결과가 존재하고 문자열 타입인 경우, Promise를 성공적으로 해결
if (result && typeof result === 'string') {
resolve(result);
} else {
// 파일을 읽는 데 오류가 발생한 경우, Promise를 거부
reject(new Error(`imageFileReaderP: 이미지를 읽을 수 없습니다.`));
}
};
// 파일을 읽기 시작
fileReader.readAsDataURL(file);
});
'Javascript > React' 카테고리의 다른 글
리덕스 기본 개념 이해하기 (2) | 2024.07.21 |
---|---|
useContext (0) | 2024.07.21 |
useRef, useImperativeHandle, forwardRef (0) | 2024.07.20 |
컴포넌트 생명 주기와 useEffect, useLayoutEffet (0) | 2024.07.14 |
깊은 복사와 얕은 복사, 그리고 의존성 목록 (0) | 2024.07.13 |