이미지 업로드 전 미리보기 & 업로드

• 이미지를 업로드하기 전, 등록한 이미지가 원하는 이미지인지 확인하는 미리보기 기능을 구현하고 싶었다.
• 구글링해보니 업로드하지 않은 이미지를 렌더링하려면, base64 인코드가 필요하다고 한다.
• 따라서 input 태그에서 파일을 받으면 base64로 인코딩되게끔 아래와 같이 작성했다.

 const handleAddFile = (event) => {
    const reader = new FileReader();
    if (event.target.files[0]) {
      reader.readAsDataURL(event.target.files[0]);
    }
    reader.onloadend = () => {
      const base64Src = reader.result;
      const imgFile = event.target.files[0];
      setPhotoPrevArr([...photoPrevArr, base64Src]);
      setPhotoUploadArr([...photoUploadArr, imgFile]);
    };
  };

FileReader 객체를 이용해야 하고, event 객체를 통해 들어온 파일을 readAsDataURL 함수를 이용해서 읽어야한다.
readAsDataURL 함수는 컨텐츠를 특정 Blob나 File에서 읽어오는 역할을 한다. 읽어오는 작업이 끝나게 되면, readyState의 상태가 DONE이 되고, loadend 이벤트가 트리거되며 base64 인코딩된 데이터가 result에 담기게 된다.
그리고 나서 인코딩된 데이터를 photoPrevArr에 갱신한다. 그리고 아래와 같이 이미지 태그를 생성하여 렌더링하면 된다.

<PhotoPrevBox>
   {photoPrevArr.map((item, index) =>
     index === 0 ? (
    <FirstPrevPhoto>
    <img
    src={item}
     style={{ width: '150px', height: '150px' }}
    />
   <div>대표 사진</div>
  </FirstPrevPhoto>
  ) : (
  <div>
    <img
     src={item}
   style={{ width: '150px', height: '150px' }}
   />
  </div>
   )
  )}
   </PhotoPrevBox>

요약

• 서버에 업로드하지 않은 이미지를 미리보기하기 위해서는 FileReader 객체를 이용하여 base64로 인코딩된 데이터를 이미지 소스로 사용하면 된다!
• 서버에 업로드할 이미지는 위에 있는 photoUploadArr을 이용하면 된다!

참고자료
https://taehoblog.netlify.app/react/previewimg/