React | 이미지 여러 장 미리보기 (preview multiple images)

* 이미지 한 장 미리보기는 이전 글 이미지 업로드 후 미리보기 (on Change / image preview)

 

1. input file 태그 생성

multiple설정을 해야 파일 여러 장 첨부 가능

 <input
   type="file"
   multiple
   accept="image/jpg,image/png,image/jpeg,image/gif"
   onChange={handleImageUpload}
 />

 

2. onChange 함수 작성

e.target.files에 첨부한 여러 개의 파일들이 배열로 담겨온다.

setState해주는 부분이 reader.onload밖에 위치하면 빈 배열값만 들어옴.. 

onload안에서 스프레드연산자로... 넣어주면 잘 들어간다...

  const handleImageUpload = (e) => {
    const fileArr = e.target.files;

    let fileURLs = [];
   
    let file;
    let filesLength = fileArr.length > 10 ? 10 : fileArr.length;

    for (let i = 0; i < filesLength; i++) {
      file = fileArr[i];
    
      let reader = new FileReader();
      reader.onload = () => {
        console.log(reader.result);
        fileURLs[i] = reader.result;
        setDetailImgs([...fileURLs]);
      };
      reader.readAsDataURL(file);
    }

  };

이런식으로 미리보기 하기 위해..