해결해야 하는 문제:

react useForm을 사용해 multipart formdata를 보내야 한다.

multipart formdata안에는

파일 2개, json파일이 있는데

json파일은 application/json으로 보내야 한다.

파일 1개는 단일 이미지 파일 1개고

나머지 파일 1개는 여러개의 이미지 파일인데
사용자가 이미지갯수는 랜덤으로 업로드 한다.

• data.slideFiles 로 통째로 배열로 백엔드에 넘겨줬으나

백엔드에서 인식을 못해서 잘개 쪼개 보내줘야 했다.

data[0],data[1]이런 식으로.

data.slideFiles는 FileList이다.

처음 잘못 시도했던점

[data.slideFiles]로 , 대괄호를 감싸 배열을 만들었다.

for문 그리고 forEach를 시도했는데 왜인지 실행이 한번만 되어서

다시 살펴보니 ...

Array.from(data.slideFiles)로 해야 했었다.

잘못된 코드

 for (var i = 0; i < [data.slideFiles].length; i++) {
 Formdata.append('slideFiles', slideFiles.files[i]);
}

한개의 FileList를 가지는 배열이 되기 때문에 for문이 1번만 실행이 되었다.

Array.from을 사용해서 Array로 변환 해주자.

참고! react-hook-form 6버전을 사용해서

input {...register('파일명')}이 안됬었다.

import { Form, Button} from 'antd';
import { useForm } from 'react-hook-form';

const {
   register,
   handleSubmit,
 } = useForm();


 const RegistForm = data => {
   const Formdata = new FormData();
   var sumFile = document.querySelector('#sumFile');
   Formdata.append('sumFile', sumFile?.files[0]);
//sumFile은 하나이므로 배열의 0번째것으로지정

   Array.from(data.slideFiles).forEach((current, index) => {
     Formdata.append('slideFiles', slideFiles.files[index]);
   });

 const json = JSON.stringify(data); //기타 json파일
   const blob = new Blob([json], {
     type: 'application/json',
   });
   Formdata.append('req', blob);


   axios({
     method: 'POST',
     url: APIADDRESS + '/setProduct?accessToken=' + user!.accessToken,
     data: Formdata,
   });
 };


//컴포넌트부분
return ( 
 <Form onFinish= {handleSubmit(data => RegistForm(data))} 
                   encType="multipart/form-data">
 <input type="file" 
      ref={register}
      name="sumFile" 
      id="sumFile" 
       accept=".jpg, .jpeg, .png" 
  />

 <input type="file"
ref={register}
name="slideFiles"
multiple
/>

<Button htmlType="submit">등록</Button>
</Form>

쨌든 오늘의 주의점! 배열을 만들 때 [ ] 로 감싸지 말자.