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

회사에서 이미지 파일을 저장할 때, 저장 전 이미지를 먼저 보여줘야 할 기능이 있어서 이리저리 알아보던 중, 첨부시 이미지를 미리보기하고, 완료시 그 파일들을 저장하는 로직을 구현해보았다.

[구현하기]

1.input 형식 지정

다음 이미지 첨부라는 버튼을 눌렀을 때, jpg나 png 형식의 파일을 선택하고, 사용자는 올린 이미지 파일을 미리 확인할 수 있는 과정을 만들고 싶었다.또한, 여러 파일의 이미지를 미리보기 및 저장할 수 있어야 했다.

<input type="file" accept="image/*" multiple id="input-img" onChange={handleChangeFile}>

multiple로 이미지 첨부시 한번에 여러 장의 사진을 첨부할 수 있도록 구현하였고, accept 속성을 통해 이미지 파일만 등록할 수 있도록 하였다.

2. createObjectUrl을 통한 함수 구현

image file을 첨부했을 때 브라우저에서 바로 오여주는 방식에는 fileReader와 URL.createObjectURL 방법 중 두번째 방법을 사용하였다.

createObjectUrl - Blob 형태로 변경
URL.createObjectUrl() 메소드는 주어진 객체를 가리키는 URL을 DOMString으로 변환하는 기능으로 해당 url은 window 창이 사라지면 함께 사라지고, 다른 window에서 재 사용이 불가능하며 이 URL은 수명이 한정되어 있다.

const[imageSrc, setImageSrc] = useState([]);

const handleChangeFile = (e) => {
	const file = e.target.files;
    let fileList = [...imageSrc]
    
   	for(var i=0; i < file.length; i++){
    	const currentImageUrl = URL.createObjectURL(file[i]);
        fileList.push(currentImageUrl);
    }
    
    if(fileList.length > 6){
    	window.alert('최대 6장까지 이미지 첨부가 가능합니다.');
        fileList = fileList.slice(0, 6);
    }
    setImageSrc(fileList);
}

이벤트를 통해 file의 정보를 받아오고, for문을 통해 첨부한 file마다 URL.createOBjectURL(file[i])를 통해 DOMString으로 변환후 useState를 사용하여 fileList를 담아주었다.

3. 미리보기 img src

{imagicSrc.map((image, id) =>
	<div>
    	<img src={image} multiple="multiple" alt={`${image}-${id}`} />
    </div>
))}