[React] 파일업로드 이미지 미리보기 구현하기

 

이번 글에서는 React로 이미지 업로드를 하고 업로드한 파일을 미리 보기로 화면에 렌더링 하여 사용자에게 보여주는 작업을 구현하도록 하겠습니다. 간단하게 미리 보기를 구현할 수 있기 때문에 이 글만 읽어도 기능을 구현하고 이해하는 데는 어렵지 않을 것으로 생각이 듭니다. 이 기능은 실제로 정말 많이 사용되고 있고 저 같은 경우는 개인적으로 개발하고 있는 사이드 프로젝트에서 아래와 같이 사용해 봤습니다. 이번 글에서는 단순히 미리보기 기능만 있는 간단한 화면 하나를 개발하고 해당 코드를 보면서 미리 보기를 구현하겠습니다.

 

 

[구현하기]

파일을 업로드하는 인풋버튼을 하나 만들고, 바로 올린 파일의 이미지를 미리보기로 보여주고 있습니다. 파일을 선택하여 업로드하는 경우, 선언한 FileReader로 업로드한 file 객체를  readAsDataURL로 File 객체를 읽어옵니다. 업로드가 되면 ImageSrc에 파일의 콘텐츠가 저장되도록 하였고 그 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;

 

 

[결과물]

이미지 파일을 업로드하면, 업로드한 파일이 미리보기로 보이는 것을 확인하실 수 있습니다.