김준기 4주차 학습 일지

멀티파트 폼 - 클라이언트

개요

클라이언트 요청 바디에 여러 유형의 데이터를 넣어줄 상황이 필요해졌다. 게시글에 이미지를 첨부하는 경우를 예시로 들 수 있겠다. 기존의 HTTP 메시지 구조는 Content-Type이 하나였기 때문에 데이터의 여러 유형을 명시할 수 있는 방법이 마땅치 않았다. 이를 개선할 수 있는 Content-Type 이 필요하다.

Content-Type: multipart/form-data

multipart/form-data는 HTML form태그 속성에 다음과 같이 명시한다. 폼 데이터가 여러 부분으로 나뉘어져 전송되고, 각 부분은 독립적으로 인코딩됨을 의미한다.

<FORM action="http://server.com/cgi/handle" enctype="multipart/form-data" method=”post”>

폼 데이터가 여러 부분으로 나뉘기 때문에, 그 경계를 명시하기 위해 boundary로 지정한다. 아래의 HTML이 있다고 해보자.

<FORM action="http://server.com/cgi/handle" enctype="multipart/form-data" method=”post”>
<P> What is your name? <INPUT type="text" name="submit-name"><BR>
What files are you sending? <INPUT type="file" name="files"><BR>
<INPUT type="submit" value="Send"> <INPUT type="reset">
</FORM>

요청 시점에 브라우저가 수행하는 일은 아래와 같다.

1. Content-Type에 임의의 문자열인 boundary 속성 추가
   1. boundary 값으로 각 파트를 구분한다.
2. Content-Deposition, Content-Type로 각 파트를 설명함

Content-Type: multipart/form-data; boundary=AaB03x
--AaB03x
Content-Disposition: form-data; name="submit-name"
Sally
--AaB03x
Content-Disposition: form-data; name="files"; filename="essayfile.txt"
Content-Type: text/plain
...contents of essayfile.txt...
--AaB03x--

boundary 분리 기준

브라우저가 HTML을 보고 바운더리를 생성하기 위해선 HTML 요소 중 어떤 기준이 필요하다. HTML form 요소의 다양한 type에 따라 바운더리 분리가 이루어진다.

input type=“text”

<form action="/upload" method="post" enctype="multipart/form-data">
  <label for="name">Name:</label>
  <input type="text" id="name" name="submit-name"><br>
  <input type="submit" value="Send">
</form>

POST /upload HTTP/1.1
Host: example.com
Content-Type: multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Length: ...

------WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="submit-name"

Sally
------WebKitFormBoundary7MA4YWxkTrZu0gW--

input type=file

<form action="/upload" method="post" enctype="multipart/form-data">
  <label for="file">Upload file:</label>
  <input type="file" id="file" name="files"><br>
  <input type="submit" value="Send">
</form>

POST /upload HTTP/1.1
Host: example.com
Content-Type: multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Length: ...

------WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="files"; filename="essayfile.txt"
Content-Type: text/plain

...contents of essayfile.txt...
------WebKitFormBoundary7MA4YWxkTrZu0gW--

<textarea> ```html Message:
<textarea id="message" name="message" rows="4" cols="50"></textarea>
```

POST /upload HTTP/1.1
Host: example.com
Content-Type: multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Length: ...

------WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="message"

This is a message.
------WebKitFormBoundary7MA4YWxkTrZu0gW--

select

<form action="/upload" method="post" enctype="multipart/form-data">
  <label for="cars">Choose a car:</label>
  <select id="cars" name="car">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </select><br>
  <input type="submit" value="Send">
</form>

POST /upload HTTP/1.1
Host: example.com
Content-Type: multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Length: ...

------WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="car"

volvo
------WebKitFormBoundary7MA4YWxkTrZu0gW--