[React] React에서 Django로 파일 보내기, headers 를 조심해!! (feat. Content-Type)

 

특정 파일을 서버로 업로드하는 개발 중이었다.

알려준 api로 열심히 파일을 보냈지만 돌아오는 대답은

파일 형식이 아닙니다. 인코딩 형식을 확인해 주세요

아오! 얼마나 얄밉던지

어느 블로그에서는 formdata를 만들어서 append 하는 형식으로 보내라!

라고 했지만.. 잘 되지 않았다...

 

 

결론부터 말하자면 api의 headers 부분을 수정하는 것이었다...!

 

 

기본적으로 input 태그를 사용하여 아래와 같이 파일을 받았다.

			<input type='file' accept='.xlsx' ....>

 

 

그리고 api...!!!

 

보통 다른 api들을 보낼 때

'Content-Type': 'application/json',

으로 설정하고 보낸다. (아마 많이들..?)

Restful API에서 request 요청 시 json을 많이 사용하기에 많이들 사용하는 설정이다.

 

하지만!!

지금은 파일 전송을 위한 api이지 json을 전송하려는 것이 아니다.

파일 전송 시에는 

 

'Content-Type': 'multipart/form-data',

 

으로 해당 값을 바꾸어 주어야 한다..!!

그러고 나니 너무나 스무스하게 200!!

 

파일을 보낼 때는 Content-Type을 한번 더 확인해 보쟈!

 

---

 

Content-Type 좀 더  살펴보기

 

 

 

형식

 해당 값은 보통 {type}/{subtype}으로 이루어진다. 주분류와 소분류로 생각하면 된다.

예를 들어 데이터가 이미지 일 때,  Content-Type 값의 type은 image, subtype png, jpg 등이 올 수 있다.

그러면 Content-Type : image/png로 설정할 수 있다.

 

대표적인 값들

text/plain	단순 텍스트 값
image/png     image/jgep	이미지 전송시 사용
multipart/form-data	form 태그를 통해 데이터를 파일첨부 할때 사용
application/json	json 형식
text/css	css 데이터

 

 

외에도 많은 값들이 많이 있는데.. 아직 전 많이 사용해보지는 않았던 것 같아요.

일단 이 정도 있다는 것 체크하고, 나중에 필요시에 확인해 보면 될 것 같습니다~

 

 

 

끝