[Next js] 갤러리구현2 - 다중이미지 업로드

이 전 글에서 단일 이미지를 업로드하는건 가능했다.
이제 다중이미지를 업로드하도록 수정해야한다.
선택한 이미지 수만큼 데이터가 n개씩 추가되야한다.

파일 여러개 올리기

• multiple 다중 이미지 선택

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

return (
    <li>
      <input id="fileInput" className="hidden" type="file" accept="image/*" multiple onChange={OnChangePhoto} />
      <label htmlFor="fileInput" >+</label>
    </li>
  );

(BF) 파일 업로드 시 액션

1. files변수에 클릭한 대상의 파일을 저장한다.
2. 불러온값이 n개로 Array.from()로 배열화하고 반복문을 돌린다
3. 이미지데이터를 웹에서 미리보기할 수 있게 변환 후
4. Base64 인코딩된 데이터가 로드되고 타겟의 값이 문자열 + 존재할때 실행한다(유효성처리)
5. imgSrc = url담을 상태관리에 업데이트(이미지링크)
6. 파일을 선택했다면 카테고리 선택 모달창 열리게

//AddPhotoBtn.tsx
  const OnChangePhoto = (e: React.ChangeEvent<HTMLInputElement>) => {
    const files = e.target.files; //클릭한대상의 이미지를 저장
    if (!files) return;//유효성체크

    Array.from(files).forEach((file) => {
      //N개를 배열로 만들어서 + 파일여러개일때 갯수만큼 순회
      const fileReader = new FileReader(); //파일읽기용 객체
      fileReader.readAsDataURL(file); //file저장
      fileReader.onload = (e) => {
        if (typeof e.target?.result === 'string' && e.target.result) {
          setImgSrc(e.target.result); 
          setIsRigionModal(true); //모달열기
        }
      };
    });
  };

1번째 문제)
반복문을 돌렸는데도 값이 마지막 하나만 데이터에 추가된다.
원인)
반복하면서 값이 마지막꺼로 씌워져서 마지막파일만 업로드되는것이다.
해결방법)
스프레드연산자로 이전값 + 다음데이터값 으로 값이 쌓이도록 변경
setImgSrc((prev) => [...prev, e.target.result]);

(BF) 모달에서 카테고리 선택후 업로드 버튼 클릭시

//AddPhotoBtn.tsx
   const onHandleUpload = () => {
    if (imgSrc.length > 0) {
        AlbumAddMutation.mutate({ imgSrc, regionCate //추가이벤트 호출
      });
      alert('앨범이 추가되었습니다.');
      setIsRigionModal(false);
    }
  };

2번째 문제)
데이터테이블에 값이 주소 문자열값만 들어가야하는데 ["주소"] 이렇게 들어가서 정상적인 url이 아니라는 오류가 발생한다.
원인)
1번째 트러블슈팅에서 다수의 이미지일 경우 값을 묶기 위해 배열을 사용해 묶어서
imgSrc 상태에 저장하였다. 배열로 묶은 통으로 값이 넘어가 정상url이 아닌것이다.
해결방법)
다수의 이미지일 경우 값을 배열로 쌓이게 묶고, 데이터테이블로 값을 전달할때
추가이벤트 호출하는 부분만 반복문으로 감싸 이미지url의 배열에서 N번째를 전달

imgSrc.forEach((src) => {
     AlbumAddMutation.mutate({ imgSrc: src, regionCate });
});

---

---

해결된 코드

(AF) 파일 업로드 시 액션

//AddPhotoBtn.tsx
  const OnChangePhoto = (e: React.ChangeEvent<HTMLInputElement>) => {
    const files = e.target.files; //클릭한대상의 이미지를 저장
    if (!files) return;//유효성체크

    Array.from(files).forEach((file) => {
      //N개를 배열로 만들어서 + 파일여러개일때 갯수만큼 순회
      const fileReader = new FileReader(); //파일읽기용 객체
      fileReader.readAsDataURL(file); //file저장
      fileReader.onload = (e) => {
        if (typeof e.target?.result === 'string' && e.target.result) {
          setImgSrc((prev) => [...prev, e.target.result]); //상태저장 + 순회하면서 저장하니가 값 쌓이게
          setIsRigionModal(true); //모달열기
        }
      };
    });
  };

(AF) 모달에서 카테고리 선택후 업로드 버튼 클릭시

//AddPhotoBtn.tsx
  const onHandleUpload = () => {
    if (imgSrc.length > 0) {
      imgSrc.forEach((src) => {
        AlbumAddMutation.mutate({ imgSrc: src, regionCate });
      });
      alert('앨범이 추가되었습니다.');
      setIsRigionModal(false);
    }
  };

---

• new FileReader() : 웹 애플리케이션에서 파일을 비동기적으로 읽을 수 있게 하는 역할로 주로 사용자가 업로드한 파일을 읽을 수 있게 해준다.
• readAsDataURL(파일) : 파일을 Base64 인코딩된 데이터 URL로 변환
  => Base64 인코딩되면 웹에서 미리보기가능(엄~청 김!)

구글링 잘하자..
값 잘 확인하자..디버깅 잘하자..