[JS] input file 에 등록된 이미지를 임시로 읽어오는 방법

 주어진 이미지 파일을 선택하면 해당 이미지를 읽어서 미리보기로 출력

이 기능을 잘 활용하면, 유저가 첨부한 이미지 파일을 서버로 전송하기 전에 미리보기로 형태로 제공해줄 수 있다고 합니다.

 

react 나 vue 같은 라이브러리 및 프레임워크에서 사용하려면 별도의 패키지를 사용하거나 아니면 상황에 맞게 가공해야 하겠지만, 이런 방식이 있다는 것에 의미를 두어 봅니다.

const wImage = document.querySelector('.image_input')

wImage.addEventListener("change", (e) => {
  const reader = new FileReader();
  reader.readAsDataURL(e.target.files[0]);
  reader.addEventListener("load", (e) => {
    console.log(e.target.result);
  });
});

 

아래는 위 로직이 어떻게 실행되는지 설명을 추가적으로 달아보았습니다.

1. wImage 요소의 change 이벤트에 대한 이벤트 리스너가 등록되어 있습니다. 이 이벤트는 파일 선택 시 발생합니다. 2. FileReader 객체를 생성합니다. FileReader는 파일을 비동기적으로 읽는 데 사용되며, 현재 코드에서는 이미지 파일을 읽는 데 사용됩니다. 3. reader.readAsDataURL(e.target.files[0]) 코드에서 FileReader 객체를 사용하여 선택한 파일을 읽습니다. e.target.files[0]은 선택한 파일의 첫 번째 파일 객체를 나타냅니다. 4. 파일이 성공적으로 읽히면 load 이벤트가 발생합니다. reader.addEventListener("load", (e) => { ... }) 코드에서 load 이벤트에 대한 이벤트 리스너가 등록됩니다. 5. console.log(e.target.result)를 통해 이미지 파일을 미리보기로 출력합니다. e.target.result는 파일의 데이터 URL을 나타냅니다. 데이터 URL은 파일의 내용을 Base64 인코딩된 문자열로 표현한 것입니다. 이를 통해 이미지를 브라우저에서 직접 표시할 수 있습니다.