FormData 를 서버로 전송해주려 하는데 정말 절대 어떤 방법으로도 넘어가지 않는다.
안되는건... 되게 해야지, 정말 수도 없는 실험이 진행되었다.
밤새 함께 해준 민구좌 감사(하트)

1. 고민해보자

<form id="formData" enctype="multipart/form-data">
  <input type="file" accept="image/*" multiple>
</form>

• 먼저 렌더 부분은 위와 같이 작성 되었다.
• 중요하게 봐야할 부분이 enctype="multipart/form-data" 이부분....
  인코딩하지 않고 파일이나 이미지를 서버로 전송할 때 주로 사용하는 속성이다.

fetch(API, 
  {
    method: 'POST',
    body: formData,
    headers: {'Content-Type': 'multipart/form-data'}
  })
  .then((res) => res.json())
  .then((result) => {console.log(result)});

• 이제 API통신으로 받아온 파일을 body에 담아 서버로 보내보자.
• 또한 멀티파트 타입을 보내기 위해 컨텐트 타입은 위처럼 지정을 해주었다.
• 여기서 formData는 그냥 변수다. 아래를 보자

let formData = new FormData();
formData.append('body', temp);
for (let i = 0; i < files.length; i++) {
  formData.append('files', files[i]);
}

• 이런식으로 만든 변수이다. 생성자 함수 그 자체를 body에 담을 수는 없다.(이름이 같지만 헷갈리지 말자)
• 아무튼 담았으나 이렇게 넘기면 서버에서는 multipart 데이터들이 받아와지지 않는다.
  multipart 데이터가 비어있다고 나온다.(넘나 슬픔....)
• 타입 설정이 잘못되었나 싶어 수만가지 테스트를 해보았다.

2. 실험해보자

1) 컨텐트 타입의 문제일까??

fetch(API, 
  {
    method: 'POST',
    body: formData,
    headers: {'Content-Type': 'application/json'}
  })
  .then((res) => res.json())
  .then((result) => {console.log(result)});

• 안된다.

2) File 타입도 JSON 문자열로 변환이 필요할까??

JSON.stringify(File)

: 응 당연히 안된다.

3. 해결해보자

: 그냥 해결방법을 빠르게 말하자면... 아직 해결중이다. 혹시나 싶어 해더 자체를 안보내보았다.

fetch(API, 
  {
    method: 'POST',
    body: formData,
  })
  .then((res) => res.json())
  .then((result) => {console.log(result)});

• 된다..... 뭐지?? 왜 설정을 안해주면 되는거지??
• 뭔가 수상해서 이건 아닌것 같아서 타입을 설정하고 되는 방법을 많은 방법으로 실험을 해보았다.
• 결론적으로는 안보내는 것만이 답이었다.

---

프론트엔드로써 서버에 대해 잘 모르기 때문에 일단 안보내질때는 헤더를 안보내는 것만이 프론트에서 해결할 수 있는 유일한 방법이었다.
문제만 해결 되었을뿐... 이유를 모르고 해결되어 찝찝하다.
추후에 백엔드 공부하며 해결 방법을 또 찾아봐야겠다.