[Java Script] 파일 미리보기 URL.createObjectURL과 FileReader의 차이와 선택.

이미지 미리 보기를 구현할 때 가장 많이 사용하는 것이 URL.createObjectURL과 FileReader 두 가지 방법이 존재한다고 한다.
각 방법들은 장, 단점이 존재하므로 어떤 상황에 사용할 것인지 개발자가 의도를 가지고 사용해야 하는 것 같다.

미리 보기 예시

URL.createObjectURL

특징

1. 동기적으로 실행
2. 해시와 함께 URL을 반환하고 문서가 언로드 이벤트(예: 문서 닫기)를 트리거하거나 실행할 때까지 메모리에 개체를 저장합니다

장점

1. 비교적 코드가 간단할 수 있다.
2. 파일을 읽지 않아도 되기 때문에 빠른 성능을 제공할 수 있다.

단점

1. 메모리 누수가 발생할 수 있어 대용량 파일에는 적합하지 않다.
2. 파일 시스템에서 로드되는 것이 아니므로 오프라인 환경에서는 작동하지 않는다.

예제

  const fileDOM = document.querySelector('#img-file');
  const preview = document.querySelector('#preview-img');

  fileDOM.addEventListener('change', () => {
    const file = fileDOM.files[0];

    if (!file) {
      return;
    }

    let maxSize = 3 * 1024 * 1024;
    let fileSize = file.size;

    if (!file.type.match("image.*")) {
      alert("이미지 파일만 선택 가능합니다.");
      return false;
    }


    if (fileSize > maxSize) {
      alert("첨부파일 사이즈는 3MB 이내로 등록 가능합니다.");
      $(fileDOM).val('');
      return false;
    }

    preview.src = URL.createObjectURL(file);
  });

FileReader

특징

1. 비동기적 실행
2. 많은 문자를 포함하는 base64를 반환하고 blob url보다 더 많은 메모리를 사용하지만 사용하지 않을 때 메모리에서 제거합니다(가비지 수집기에 의해).

장점

1. 작은 파일과 큰 파일에서 모두 작동한다.
2. 이미지를 로드할 때 오프라인에서도 작동할 수 있다.

단점

1. 코드 작성이 복잡해질 수 있다.
2. 파일 읽기 작업이 필요하므로 성능이 저하될 수 있다.

예제

  const fileDOM = document.querySelector('#img-file');
  const preview = document.querySelector('#preview-img');

  fileDOM.addEventListener('change', () => {
    const file = fileDOM.files[0];

    if (!file) {
      return;
    }

    let maxSize = 3 * 1024 * 1024;
    let fileSize = file.size;

    if (!file.type.match("image.*")) {
      alert("이미지 파일만 선택 가능합니다.");
      return false;
    }

    if (fileSize > maxSize) {
      alert("첨부파일 사이즈는 3MB 이내로 등록 가능합니다.");
      $(fileDOM).val('');
      return false;
    }

    const reader = new FileReader();
    reader.onload = ({target}) => {
      preview.src = target.result;
    };
    reader.readAsDataURL(fileDOM.files[0]);
  });

 

현재 진행중인 프로젝트는 3MB 이하의 작은 용량을 차지하는 IMG 파일을 업로드할 예정이므로 URL.createObjectURL 방식을 선택했다.

참조

[JavaScript] 이미지 미리보기 createObjectURL() vs FileReader()

 

이미지 미리보기 (createObjectURL vs FileReader) · Issue #66 · SeonHyungJo/Tip-Note