업로드 할 파일의 이미지 미리보기

 

서론

진행 중인 프로젝트에 업로드 할 파일의 이미지를 미리보여주는 기능을 넣어 보고싶어서 내용을 알아보다가,

단순히 코드 복붙을 하고 싶지않아 정리하게 되었다.

 

Web API 인 FileReader라는 객체를 이용하여 구현해보았다.

 

---

React에서 이미지 미리보기

마크업

...
const [imgSrc, setImgSrc] = useState("");
return(
	<div>
        <Label htmlFor="input-file" className="img_label">
        이미지업로드
            {imgSrc && <img src={imgSrc} alt="preview-img"></img>}
            <FileInput
             multiple
             type="file"
             accept="image/*"
             id="input-file"
             style={{ display: "none" }}
             onChange={(e) => {
               encodeFileToBase64(e.target.files[0]);
             }}
          />
          </Label>
   	</div>
 </Label>
)
...

동작원리

1. onChage함수 안에서 e.target.files를 콘솔에 찍어보면 선택된 파일의 목록(FileList)이 나온다
2. fileList를 자바스크립트에서 파일에 접근할 수 있도록 한다
3. file 객체를 읽어서 base64로 인코딩하여 state안에 넣어준다.

Look at this beautiful filelist

 

FileReader

FileReader는 file, blob 객체를 다루는 그런 도구. file, blob 객체를 이용해 특정 파일을 읽어 자바스크립트에서 접근할 수 있도록 돕는다.

기본적으로 eventTarget을 상속받았기에 이벤트리스너 부착이 가능하다.

fileReader.readAsDataURL()

base64로 인코딩한 문자열을 FileReader 인스턴스의 result라는 속성에 담는다.

즉 reader.result 하면 자스에서 사용 가능한 해당 이미지의 url이 뜬다.

reader.onload

FileReader가 성공적으로 파일을 읽어들였을 때 트리거되는 이벤트 핸들러.

여기서 state값을 업데이트 해주면 된다.

 

로직

const encodeFileToBase64 = (fileBlob) => {
    const reader = new FileReader();
    reader.readAsDataURL(fileBlob);
    console.log(reader);
    return new Promise(() => {
      reader.onload = () => {
        setImgSrc(reader.result);
      };
    });
  };

 

전체코드

...
const [imgSrc, setImgSrc] = useState("");

const encodeFileToBase64 = (fileBlob) => {
    const reader = new FileReader();
    reader.readAsDataURL(fileBlob); // js에서 사용가능한 이미지 url를 reader 객체에 result 속성에 집어넣을게!
    return new Promise(() => {
      reader.onload = () => {
        setImgSrc(reader.result);
      };
    });
  };

return(
	<div>
        <Label htmlFor="input-file" className="img_label">
        이미지업로드
            {imgSrc && <img src={imgSrc} alt="preview-img"></img>}
            <FileInput
             multiple
             type="file"
             accept="image/*"
             id="input-file"
             style={{ display: "none" }}
             onChange={(e) => {
               encodeFileToBase64(e.target.files[0]);
             }}
          />
          </Label>
   	</div>
 </Label>
)

...

---

 

참고 

https://nukw0n-dev.tistory.com/30#FileReader-readAsDataURL--

리액트에서 이미지 미리보기 만들어보기 (React Image Preview)