임시 URL을 생성하는 두 가지 방법을 알아보자!
// 1. 임시 URL 생성 (가짜 URL - 내 브라우저에서만 접근 가능하다.)
const result = URL.createObjectURL(file);
console.log(result);
아래와 같은 형태의 url이 생성된다.
// 결과
blob:http://localhost:3000/f327a5c9-e636-4c7b-9f32-0322062b8a69
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! createObjectURL
은 FileReader
에 비해 비교적 최근에 나온 기능으로,
브라우저에 따라서 지원되지 않는 경우가 있을 수 있다.
모든 브라우저/버전에서 지원해야 한다면 FileReader
를 이용하자!
createObjectURL
을 사용하면 메모리 관리를 해줘야 한다.
[참고 - 메모리 관련]