# 簡介 form-data － Multipart Form vs Form Url Encoded

羅時豐只有一位，但 form data 卻有兩種 -- Multipart Form 跟 Form Url Encoded。

## 說明
### application/x-www-form-urlencoded

跟 URL query data 一樣，會把要傳的資料用 URL 編碼的方式串成一個 string。

例如若 data 長這樣

{
  username: 'admin',
  password: '123456'
}

他的 url encode 就是長這樣: `username=admin&password=123456`
也就是會被組合成一條純文字

#### Example

> POST /formdata?id=ray HTTP/1.1
> Content-Type: application/x-www-form-urlencoded
> Content-Length: 30
| username=admin&password=123456

### multipart/form-data

會將資料的每個部分以 boundary string 隔開，並會包含每個部份的 Content-Type（MIME）& Content-Disposition（meta-data）。
適合用來傳送含有 binary 的資料（單一 binary 的話會用 `Content-Type: application/octet-stream` 來傳），例如：圖片、檔案等等。

#### Example

> POST /formdata?id=ray
> Content-Length: 3852
> Content-Type: multipart/form-data; boundary=------------------------69af88cb2727e49a
| --------------------------69af88cb2727e49a
| Content-Disposition: form-data; name="username"
| admin
| --------------------------69af88cb2727e49a
| Content-Disposition: form-data; name="password"
| 123456
| --------------------------69af88cb2727e49a
| Content-Disposition: form-data; name="file"; filename="rayisnake.md"
| Content-Type: text/x-markdown
| (3.3 KB hidden)
| --------------------------69af88cb2727e49a--

## Play!

Any HTTP Method to `https://yuer.tw/formdata?foo=bar` with form data(only handle text form-data)

### response:
- request-headers
- request-query-data
- request-body-data
- request-raw-body

### preview:
- form-data

- x-www-form-urlencoded

see the difference!

## 補充

為什麼 `x-www-form-urlencoded` 不適合傳送 binary。

西歐字母文字 (non-alphanumeric) 會被替換成 `%HH`, 用一個百分號和兩個 16 進位的數字來表示文字的 ASCII Code

在編碼時，一個非西歐字母需要 3 個 Byte 來呈現，對於一個大型的 binary 檔案，三倍的 payload 變得很沒有效率。

- Reference [application/x-www-form-urlencoded or multipart/form-data?](https://stackoverflow.com/questions/4007969/application-x-www-form-urlencoded-or-multipart-form-data)

Thanks [Yuer Lee](https://github.com/passerbyid)
[Playground Backend Repo](https://github.com/passerbyid/Form-Data)