[REACT] REACT Formdata에 이미지파일 여러개 넣기

예시 코드와 주석을 보면서 Formdata에 이미지파일 넣는 방법을 확인해 보자 !

아래 코드를 통해 Formdata에 이미지 파일 넣는방법, 미리보기 이미지 생성/삭제 방법을 확인 할 수 있다.

 

@ input태그 동적으로 생성하기.

// map 함수를 활용해 , type="file"인 input을 동적으로 생성해준다.

... ImageUploader.jsx

return (
  <>
    {OrderList.map((item, index) => {
      return (
      <Wrapper key={`order_wrapper_${index}`}>
        <ImgUploadInput
          onChange={(e) => {
            handleImage(e, index);
          }}
          key={`ImgUploadInput_${index}`}
          id={`main_img_${index}`}
          type="file"
          accept="image/*"
        />
      </Wrapper>
      )
    )}})
  </>

@ handleImage함수로, onChange이벤트 제어하기

// 전역변수로 활용하기 위해 Atom을 정의한다.

... PostAtom.js

export const SubImageStateAtom = atom({
  key: "SubImageState",
  default: {
    file: Array.from({ length: 100 }, () => 0),
    state: false,
    preview: Array.from({ length: 100 }, () => 0),
  },
});


... ImageUploader.jsx

// Atom 호출

const [subImage,setSubImage] = useRecoilState(SubImageStateAtom);

...

// 이미지파일과 PreviewUrl을 Atom에 저장한다.

const handleImage = (e, index) => {
    let cur_file = e.target.files[0];
    const filesInArr = Array.from(e.target.files);
    const previewArr = [window.URL.createObjectURL(cur_file)];
    if (cur_file) {
      setSubImage((oldList) => {
        const newList = {
          ...oldList,
          file: oldList.file.map((el, idx) => {
            if (el) {
              return el;
            } else if (idx === index + 1) {
              return cur_file;
            }
          }),
          preview: oldList.preview.map((el, idx) => {
            if (el) {
              return el;
            } else if (idx === index + 1) {
              return window.URL.createObjectURL(cur_file);
            }
          }),
        };
        return newList;
      });
    }
  };

@ deletImage함수로, Preview이미지, 이미지파일 필터하기.

const deleteImage = () => {
    setSubImage((oldList) => {
      const newList = {
        ...oldList,
        file: oldList.file.filter((el, idx) => Number(deleteIndex) !== Number(idx)),
        preview: oldList.preview.filter((el, idx) => Number(deleteIndex) !== Number(idx)),
      };
      // 배열의 원소가 하나 삭제 될때마다, 0을 push해줌으로써 배열의 길이를 유지한다.
      newList.file.push(0);
      newList.preview.push(0);
      return newList;
    });

@ map함수를 활용해 fromData에 데이터 추가하기.

// 리액트의 불변성 유지를 위해 map함수를 활용해 데이터를 추가해준다.
const onSubmit = (data) => {
    subImage.file.map((el, idx) => {
      if (el) {
        return formData.append(`subImg_${idx}`, el);
      }
    });

 

---

[ 참고 링크]

 

Formdata에 이미지파일 여러개 넣기.