FileReader VS URL.createObjectURL

 

FileReader

FileReader는 File, Blob 객체가 저장하고 있는 바이너리 데이터를 '비동기적'으로 읽어주는 객체이다
=>File 또는 Blob 객체를 읽어서 result 속성에 저장 (result 속성을 통해 데이터를 접근가능) base64로 인코딩된 값을 반환

기본 동작은 다음 과정을 거친다.

1. read

2. load event

3. result

const reader = new FileReader();

reader.readAsArrayBuffer(blob) // ArrauBuffer 형태로 데이터를 읽어 변환

reader.readAsText(blob, [encoding]) // encoding 방식에 맞게 텍스트 형태로 데이터를 읽어 변환 (기본 인코딩 방식 - utf-8)

reader.readAsDataURL(blob) // base64 형태의 data url로 데이터를 읽어 변환

• readAsDataURL의 경우 img 태그와 같이 src 속성에 리소스를 다루어야 하는 경우 유용하다.
  
  

많이 사용되는 예시

const reader = new FileReader();
reader.readAsDataURL(blob) // base64 형태의 data url로 데이터를 읽어 변환

// 데이터를 모두 읽으면 onload 이벤트를 발생
reader.onload = () => {
    const data = reader.result; // 결과 저장
    console.log(data)
}

• loadstart : 로딩이 시작될 때
• progress : 읽기를 수행하고 있는 중
• load : 에러 없이 리딩이 완료된 때
• abort : abort() 메서드가 호출된 때
• error : 에러가 발생한 때
• loadend : 성공/실패 여부 상관없이 리딩이 완료된 때
• reader.result : 성공 시 읽어들인 결과
• reader.error : 실패 시 발생한 에러

데이터 URL은 파일의 전체를 Base64로 인코딩한 문자열로 나타낸다, 이미지 파일을 웹 페이지에 삽이하거나 전송할 때 유용하다

 

URL.createObjectURL

createObjectURL() 메서드는 File,Blob 객체를 가리키는 고유한 URL을 생성할수 있으며 해당파일이나 Blob 가리키는 포인터 역할은 한다

생성된 URL 객체는 브라우저의 메모리에 저장되며 Document가 닫히기 전까지 유지된다 따라서 페이지를  새로고침하거나 다른페이지로 이동해도 URL객체는  그대로 유효하다 

메모리 누수 방지를 위해 revokeObjectURL() 메서드를 사용하여 URL을 해제해 주어야 한다

hash 형태의 url을 반환

const objectURL = URL.createObjectURL(object)

// object에는 File, Blob, MediaSource 객체 와 같은것들이 입력되어야 한다

 

URL.createObjectURL은 브라우저의 내부 메모리에 파일을 저장하고 URL을 생성하기 때문에, 대용량 파일을 다룰 때 유용할 수 있으며  파일을 미리 다운로드하여 로드할 수 있으므로 초기 로딩 시간을 최적화할 수 있다  그러나 생성된 URL은 웹 페이지를 벗어난 후에는 무효화되므로, 임시적인 파일 표시에 적합하다
반면에 FileReader.readAsDataURL은 파일의 전체 내용을 문자열로 인코딩하여 제공하므로, 파일 크기가 큰 경우에는 메모리 부담이 있을 수 있다 그러나 생성된 데이터 URL은 파일의 내용 자체를 포함하므로, 웹 페이지를 벗어나도 유효한 URL로 사용할 수 있다