Lab | JavaScript, multipart 타입을 서버에서 못 받아온다?

xedni·2020년 12월 19일
1

Xedni's LAB

목록 보기
4/6
post-thumbnail

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

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

profile
"꾸준한 삽질과 우연한 성공"

2개의 댓글

comment-user-thumbnail
2020년 12월 26일

상혁군 왜 블로그 포스팅 안 올라와

1개의 답글