[JS] FileReader 클래스

자바스크립트의 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);
    });