HTTP multipart/form-data 파일 업로드 문제 해결

토이프로젝트에서 쓰이는 기능중에 이미지와 파일을 업로드하는 경우가 종종 생겼는데,

json 형태의 dto와 파일을 함께 받아야하는 상황에서 오류가 발생했었다.

​

HTTP에 대한 개념적인 부분이 부실해서인지, 막연히 이미지만 multipart로 보내면 된다고 생각했었다.

​

게시글 작성에 관한 정보를 담은 json은 그대로 @Requestbody로 보냈다가 415 Unsupported Media Type 오류를 직면했다.

​

 

클라이언트에서 서버로 파일을 업로드하는 과정

1. 웹브라우저를 통해 파일을 등록하는데, HTTP header의 Content-Type 속성을 multipart/form-data로 지정

Content-Type은 간단히 말해서 '보내는 자원의 형식'을 명시하는 헤더의 정보이다.

​

2. 이미지 파일을 BTYE화해서 HTTP request body에 담아 서버로 전송

​

​

 

Content-Type가 multipart/form-data로 지정 되어 있어야 서버에서 정상적으로 데이터를 처리할 수 있다.

 

전송되는 파일 데이터의 구분자로 boundary에 지정되어 있는 문자열을 이용하는데, 규격에 맞게 format을 유지하면 서버에서도 통신 규격에 맞게 데이터를 파싱한 후 처리하게 된다.

​

Content-Legnth는 기본 1500byte까지는 하나의 패킷으로 전송되는데, 이미지 파일의 경우 여러 개의 패킷으로 쪼개져서 도착하게 될 것이다.

​

​

attribute중에서 x-www-form-urlencode와 multipart/form-data은 둘다 폼 형태이지만, x-www-form-urlencode은 대용량 바이너리를 전송하기에 비효률적이라 대부분 첨부파일은 multipart/form-data를 사용한다고 한다.

​

​

Postman으로 Multipart/form-data로 이미지를 전송해보자!

보통 HTTP messgae Body 영역에 raw JSON으로 적용해서 Content-Type을 application/json으로 작업하는 일이 많은데, 이미지나 파일을 업로드 해야하는 경우이므로

​

form-data로 설정해서 필요한 param마다 Content-Type를 지정해줘야한다.

​

진행하던 토이프로젝트의 경우에는 게시글 작성을 위한 dto와 이미지 파일을 담을 images가 필요한데 dto는 Content-Type에 application/json으로 직접 명시해둬야한다.

​

 

​

Postman에서 확인한 결과. 위처럼 작업해서 해결할 수 있었다.