application/www-form-urlencoded vs multipart/form-data

웹에서 파일을 서버로 보내기 위해서는 multipart/form-data 값을 반드시 써야한다.

그렇게 하지 않으면 웹서버에서는 파일명만 받을 수 있기 때문이다.

 

<form 
	id="fregisterform" 
	name="fregisterform"
	method="post" 
	enctype="multipart/form-data"
    >
    <input type="file">
</form>

 

Note
enctype :
   전송되는 데이터의 인코딩 형식을 설정

enctype 속성은 3가지 방법으로 지정될 수 있다.

 

application/www-form-urlencoded	/* 디폴트 값 */ 폼데이터는 서버로 전송되기전에 URL-Encode 처리 됨
multipart/form-data	파일을 업로드 할 때 사용됨
text/plain	인코딩을 거치지 않은 문자 상태로 전송됨

Note
form-data: 
   브라우저가 난수로 이루어진 {boundary string} 값을 생성해준다. 
   예시: -----WebkitFormBoundaryFIfNdufjIfjru38f7h7
   난수가 아닌 원하는 방식으로도 생성할 수 있다.

 

application/www-form-urlencoded vs multipart/form-data

아래와 같은 로그인 form이 있다고 가정했을때

키	값
username	woojung
password	123123

 

x-www-form-urlencoded

이와 같은 form데이터를 서버에 넘길때  x-www-form-urlencoded로 인코딩을 하면 많이들 익숙한 방식으로 서버에 보내진다.

username=woojung&password=123123

• URL encoding 방식과 GET 메소드 방식과 비슷합니다. 즉 하나의 queryString이 되도록 인코딩 됩니다. 예를 들어 스페이스 값 같은 경우 %20으로 대체 된다.
• string의 최대 길이에 대해서는 HTTP 명세서 에서는 언급되지 않으나 서버의 스팩에 따라 제한적일 수 있다.
• URL encoding 방식에 따라 하나의 character당 3bytes 크기로 인코딩 된다.

 

multipart/form-data

하지만 form-data 방식의 경우 키 와 값은 {boundarystring}을 기준으로 다음과 같이 나누어 진다.

만약 로그인과 더불어 파일을 같이 보낸다고 가정하면 다음과 같이 된다.

--{boundary string}
Content-Disposition: form-data; name="username",  // username=woojung

woojung 
--{boundary string}
Content-Disposition: form-data; name="password", // password=123123

123123
--{boundary string}
Content-Disposition: form-data; name="file"; filename="image.jpg"
Content-Type: image/jpeg,  // 업로드 한 파일 정보

--{boundary string}--  // 종료

• boundary string 에 난수값으로 대체되어 구분자 역할을 한다. ( 여러개의 파일을 한번에 보내도 서버에서 구분할 수 있음)
• -- 을 붙인 boundary string기준으로 나뉘며 마지막에 --을 추가적으로 붙여줌으로 종료를 알린다.
• 바이너리 데이터는 인코딩 되지 않으며 metadata 와 함께 보내진다.

 

공통점

• MIME type으로 인코딩 되며 HTTP header ContentType에 담기게 된다.
• key-value 페어 데이터로 서버에 전송된다.
• POST request 방식의 form data로 전송된다.

 

참고자료:

dev.to/getd/x-www-form-urlencoded-or-form-data-explained-in-2-mins-5hk6

javarevisited.blogspot.com/2017/06/difference-between-applicationx-www-form-urlencoded-vs-multipart-form-data.htmldocs.thewhitespace.io/unifi/1.5/multipart_form_data.html#http-header