이미지 미리보기 :: createObjectURL vs FileReader

이주희·2022년 12월 14일
0

JavaScript

목록 보기
46/49

임시 URL을 생성하는 두 가지 방법을 알아보자!

1. createObjectURL

  • createObjectURL로 생성한 이미지는 가짜 URL이다.
    👉🏻 다른 브라우저에서는 접근이 불가능하다.
// 1. 임시 URL 생성 (가짜 URL - 내 브라우저에서만 접근 가능하다.)
const result = URL.createObjectURL(file);
console.log(result);

아래와 같은 형태의 url이 생성된다.

// 결과
blob:http://localhost:3000/f327a5c9-e636-4c7b-9f32-0322062b8a69

2. FileReader

  • FileReader로 생성한 이미지 URL은 진짜 URL이다!
    👉🏻 다른 브라우저에서도 접근이 가능하다.
const fileReader = new FileReader();
fileReader.readAsDataURL(file);
fileReader.onload = (event) => {
  if (typeof event.target?.result === "string") {
    console.log(event.target?.result);
  }
};
// 결과
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAbsAAAEuCAYAAAAXwrzuAAAK1mlDQ1BJQ0MgUHJvZmlsZQAASImVl...

둘 중에서 뭐 쓰지?

  • 딱 봐도 createObjectURL이 더 간편하다.

  • But! createObjectURLFileReader에 비해 비교적 최근에 나온 기능으로,
    브라우저에 따라서 지원되지 않는 경우가 있을 수 있다.

  • 모든 브라우저/버전에서 지원해야 한다면 FileReader를 이용하자!

  • createObjectURL을 사용하면 메모리 관리를 해줘야 한다.
    [참고 - 메모리 관련]

profile
🍓e-juhee.tistory.com 👈🏻 이사중

0개의 댓글