이미지 미리보기 구현

🔥 문제 및 질문

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

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

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

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

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

📢 해결 과정

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

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

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

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

📃 참고자료

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

생성일

Oct 27, 2021 05:14 PM

기록자

해결 여부

속성

React

카테고리

이슈


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


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);
  };