[네트워크/HTTP]HTTP 파일 업로드 Multipart(멀티파트) 란?

HTTP 클라이언트(웹브라우저) -> 서버 업로드 과정

1. form을 통해서 파일을 등록하여 전송
2. 웹 브라우저가 보내는 HTTP메시지는 Content-Type 속성이 multipart/form-data로 지정되고 정해진 형식에 따라 메시지를 인코딩하여 전송
3. 서버는 multipart 메시지에 대해서 각 파트별로 분리하여 개별 파일의 정보를 획득

💚예시

1. HTML의 Form부분

기본적으로 Form의 enctype은 위의 사진처럼 되어 있다. urlencoded방식은 파일을 보낼 수가 없다.

💡파일 업로드 하기 위해서는 enctype방식을 multipart/form-data방식으로 변경해 주어야 한다.

서버는 multipart 메시지에 대해서 각 파트별로 분리하여 개별 파일의 정보를 획득

이미지 파일을 전송한다고 png, jpg 파일 자체가 전송되는 것은 아니다.

즉, 이미지 파일도 문자이므로 💡이미지를 문자(Boundary)로 생성하여 HTTP request body에 담아 전송

 

 

Multipart 란?

• 주로 웹 클라이언트가 파일 전송을 위해 request 할 때, HTTP request body에 데이터를 여러 부분으로 나눠서 보낸다.
• 파일을 한 번에 여러 개 전송 시 body에 파일이 여러 개가 연결되어 전송된다.
• 주로 HTML Input element에서 enctype으로 이용된다.
• 큰 용량의 bounary 데이터를 전송하는데 적합하다. 

 

Multipart가 생긴 배경

• HTML의 input의 type 중에 "file"은 사용자 컴퓨터에서 서버로 파일을 전송하기 위한 input이다.ex) <input type="file">
• form이 submit 되면 form안에 있는 데이터가 HTTP Request로 서버로 전송된다.
• 파일 업로드의 원리는 HTTP Request가 가지고 있다.
• 💡 HTTP Rquest는 Body에 클라이언트가 전송하려고 하는 데이터를 넣을 수 있다.
• Body에 들어가는 데이터 타입을 HTTP Header에 명시해 줌으로써 서버가 타입에 따라 알맞게 처리한다.
• 이 Body의 타입을 명시하는 HTTPHeader가 Content-type이다. Content-type에 Multipart로 설정해 두면 파일 업로드를 할 수 있다.

Boundary 란?

• 파일을 첨부할 때, 브라우저가 생성한 값
• 일반적으로 여러 개의 엔티티가 전송되었을 때 각각의 key-value쌍을 구분하기 위해서 boundary를 이용한다.
• 아래 HTTP 예제에서는 3개의 gif 파일이 보내졌는데, 그들을 각각 구분하는 용도로 boundary가 사용된다.
• boundary는 1~70자의 문자들로 --로 시작하여 --로 끝난다
• 서버에서는 boundary로 나누어 각 데이터들을 읽는다.

 

 

참조

https://youtu.be/Ao8ZiZR_DqU

https://velog.io/@jakeseo_me/Multipart-%EC%A0%95%EB%A6%AC