📃

이미지 미리보기 구현

생성일

Dec 3, 2021 06:44 AM

기록자

해결 여부

속성

React

카테고리

이슈

🔥 문제 및 질문

사용자 타임 인증 이미지 업로드 기능 구현

MVP 구현 내용 중 특정 시간 사용자 인증을 위한 이미지를 업로드하는 기능을 담당하게 되었다...!

선협 강사님의 강의를 토대로 필요한 부분을 추가하며 코드를 작성하였다.

강의 코드는 다음과 같이 UploadContainer, Input Styled component로 구성되어있다.


├── UploadContainer: onClick, onDrop, onDragEnter, onDragLeave, onDragOver
└── ├── Input: onChange

해당 코드의 결과는 파일을 UploadContainer내부에 드래그하거나 클릭하면 파일이 업로드되면서 파일명을 보여준다. 그렇다면 이미지파일만! 올려서 올린 이미지를 볼 수 있게 구현할 수 있는 방법은 없을까?

📢 해결 과정

'자바스크립트 이미지 미리보기', 'input type="file" 미리보기'와 같은 키워드를 클릭하면 많은 구현방법이 있다. 그 중 나는 FileReader 객체를 사용하여 코드를 작성하였다.

FileReader를 통해 쉽게 파일 내용을 읽거나 저장이 가능하다. 구현한 내용은 다음과 같다.


const handlePreview = (changedFile) => {
    const imgReader = new FileReader();
    const uploadItem = document.querySelector('.upload_img');

    imgReader.onload = (e) => {
      uploadItem.style.backgroundImage = `url(${e.target.result})`;
    };
    imgReader.readAsDataURL(changedFile);
  };

FileReader인 imgReader가 onload 될 경우 원하는 영역의 background-image에 업로드한 이미지가 지정되게 구현하였다,,

💛여기서 onload는 파일 읽기가 성공적으로 완료되었을 때 마다 실행되는 FileReader의 이벤트 핸들러이다.

📃 참고자료

https://stackoverflow.com/questions/38810956/set-background-image-to-a-blob-uri