리액트 : 이미지 업로드 미리보기

🥰 리액트 프로젝트를 하면서 업로드  미리보기를 구현하고 싶었다.

유용하게 사용이 될 것 같아 간단한 사용법 과 어떻게 구현이 되는지 정리해 보려고 한다.

---

 

1. 파일을 업로드 하는 인풋 버튼을 만든다.

2. 파일을 선택하여 업로드 하는 경우 선언한 FileReader로 업로드한 file 객체를 readAsDataURL로 File 객체를 읽어 온다.

3. 업로드가 되면 ImageSrc에 파일의 콘텐츠가 저장이 된다. setImageSrc로 파일의 컨텐츠를 감싸준다.

4. ImageSrc를 이미지 태그로 Src로 줘서 이미지  경로를 갖고 올 수 있도록 props 설정을 한다.

 

import { useState } from "react";

const Preview = () => {
    const [imageSrc, setImageSrc]: any = useState(null);

    const onUpload = (e: any) => {
        const file = e.target.files[0];
        const reader = new FileReader();
        reader.readAsDataURL(file);

        return new Promise<void>((resolve) => { 
            reader.onload = () => {	
                setImageSrc(reader.result || null); // 파일의 컨텐츠
                resolve();
            };
        });
    }
    return (
        <input 
            accept="image/*" 
            multiple type="file"
            onChange={e => onUpload(e)}
        />
        <img 
            width={'100%'} 
            src={imageSrc} 
        />
    )
}

export default Preview;

---

🎈 완성화면