[ js ] 파일 API - FileReader() 객체

 

• type이 input[type="file"] 또는 API 요청과 같은 File 또는 Blob객체를 편리하게 처리할 수 있는 방법을 제공하는 객체
• abort, load, error와 같은 이벤트에서 발생한 프로세스를 처리하는 데 주로 사용
• File 또는 Blob 객체를 읽어서 result 속성에 저장 ( result 속성을 통해 데이터를 접근 가능 )
• 비동기적으로 동작 - 파일 선택시 대용량 파일을 선택하고 파일 정보를 result 속성에 저장하는 과정이 동기식으로 동작하게 된다면 파일 정보를 result 속성에 저장할 때가지 html 렌더링에 영향을 줄 수 있게되어 비동기적으로 동작함.

 

FileReader 문법

 

new 연산자를 사용하여 객체 생성

let reader = new FileReader();

파일의 내용은 result 속성에 문자열 값으로 들어감.

 

result 속성의 4가지 방식으로 파일 읽기

• readAsText() 파일 객체의 내용을 텍스트로 읽음
• readAsDataURL() 파일 객체를 읽은 후 데이터 URL로 변환
• readAsArrayBuffer() 파일 객체의 내용을 배열 버퍼로 읽음
• readAsBinaryString() 파일 객체의 내용을 비트 문자열로 읽음

 

File 또는 Blob로 읽는 방법

 

load, abort, error, progress 이벤트에서 FileReader 객체를 사용하여 결과를 확인하거나 처리함.

 

1. load  파일 읽기 작업이 완료되면 작동

2. error 에러로 인해 파일을 읽을 수 없을 때 동작

3. abort abort()함수를 호출하여 파일 읽기 작업이 취소될 때 동작

4. progress 파일을 읽는 동안 일정한 간격으로 동작

 

FileReader 객체의 주요 속성

 

1. result 파일 읽은 결과 또는 null 값 - result 값으로 읽은 파일을 원하는 방식으로 처리함.
2. error 읽기 작업에서 발생한 오류를 설명하는 Error 객체 또는 null 값
3. readyState 객체의 상태를 숫자로 처리함.
   1. 0 ( Empty ) 비어있음
   2. 1 ( loading ) 파일을 읽는 중
   3. 2 ( Done ) 완료 - 파일 읽기 작업이 완료되었음.

 

vue 에서 이미지 파일 불러와서 미리보기로 보여주기

<template>
	<div>
    	<img :src="imageSrc" alt="" />
    </div>
    <input type="file" id="imgUpload" @change="setImgUpload" accept="image/*" />
    <v-btn color="rgba(38, 54, 154, 0.75)" class="whiteBtn">
    <label for="imgUpload">파일업로드</label></v-btn>
</template>
<script setup>
import { ref } from 'vue';

const imageSrc = ref("../images/image.png"); // 이미지 동적바인딩하기 위해 public폴더에 넣어야함.
const files = ref("");
const setImgUpload = (e) => {
	files.value = e.target.files[0];
    
    const reader = new FileReader();
    reader.onload = (e) => {
    	imageSrc.value = e.target.result;
    };
    reader.readAsDataURL(files.value);
}

</script>

 

label for 와 <input type="file" id=>를 'imgUpload' 동일한 이름으로 연결해주어 label을 클릭했을 때에 input file이 클릭될 수 있도록 처리

 

change 메소드로 현재의 값을 파라미터로 전달받아 e.target.files[0]의 값을 files 변수에 담는다. 

FileReader() 를 사용하기 위해 변수 reader에 new 연산자를 사용하여 FileReader 객체를 생성한 값을 담고 파일을 읽는 작업이 완료되면 onload가 작동하고 result에 담긴 결과를 imageSrc.value 값으로 넣는 다. 

 

그 reader.readAsDataURL()안에 변수 files에 담긴 이미지 데이터를 URL로 변환하여 내보낸다.