前端进阶-个人笔记-网络篇-enctype

我们知道，HTTP 协议是以 ASCII 码传输，建立在 TCP/IP 协议之上的应用层规范。规范把 HTTP 请求分为三个部分：状态行、请求头、消息主体。类似于下面这样：

对应一个http请求就是：请求行，请求头，请求体。

请求行包含三个内容： method + request-URI + http-version
请求行例如:GET /icwork/? Search = product HTTP/1.1

我们在提交表单的时候，form表单参数中会有一个enctype的参数，代表表单的编码方式。enctype指定了HTTP请求的请求头的Content-Type。

默认情况下，HTML的form表单的enctype=application/x-www-form-urlencoded。

请求类似于下面这样（无关的请求头在本文中都省略掉了）：

POST http://www.example.com HTTP/1.1 Content-Type:
application/x-www-form-urlencoded;charset=utf-8

title=test&sub%5B%5D=1&sub%5B%5D=2&sub%5B%5D=3

application/x-www-form-urlencode

application/x-www-form-urlencode是是一种表单提交方式，该方式是采用urlencode的，也就是说，提交的数据都是经过加密的，服务端需要decode才能正确获得数据。

当action为get时候，浏览器用x-www-form-urlencoded的编码方式把form数据转换成一个字串（name1=value1&name2=value2…），然后把这个字串append到url后面，用?分割，加载这个新的url。

multipart/form-data

一般情况下，我们如果要在表单中上传文件，一般会将form的enctype参数设置为multipart/form-data。这种方式只支持POST的请求方式。

Contype-Type=multipart/form-data情况的时候，都会通过一个特殊的字符串来将原始POST数据进行分割。
我们可以看到下面的请求中Content-type的类型：

Content-Type
multipart/form-data; boundary=---------------------------66841812532223

其中boundary=---------------------------66841812532223，为分割符号。
其中数据块开始的分隔符 {boundary} 会在前面加上“”
数据块结束的分隔符 {boundary} 会在后面加上“==”

application/json

application/json 这个 Content-Type 作为响应头大家肯定不陌生。实际上，现在越来越多的人把它作为请求头，用来告诉服务端消息主体是序列化后的 JSON 字符串。由于 JSON 规范的流行，除了低版本 IE 之外的各大浏览器都原生支持 JSON.stringify，服务端语言也都有处理 JSON 的函数，使用 JSON 不会遇上什么麻烦。
请求：

POST http://www.example.com HTTP/1.1
Content-Type: application/json;charset=utf-8
{“title”:“test”,“sub”:[1,2,3]}

这种情况下，请求的Content-Type是Json的数据格式，http body中的内容就是请求的json数据。

提醒：axios的Content-type默认设置为application/json

文件上传为什么要用 multipart/form-data？

1867文档中也写了为什么要新增一个类型，而不使用旧有的application/x-www-form-urlencoded：因为此类型不适合用于传输大型二进制数据或者包含非ASCII字符的数据。平常我们使用这个类型都是把表单数据使用url编码后传送给后端，二进制文件当然没办法一起编码进去了。所以multipart/form-data就诞生了，专门用于有效的传输文件。

也许你有疑问？那可以用 application/json吗?
其实我认为，无论你用什么都可以传，只不过会要综合考虑一些因素的话，multipart/form-data更好。例如我们知道了文件是以二进制的形式存在，application/json 是以文本形式进行传输，那么某种意义上我们确实可以将文件转成例如文本形式的 Base64 形式。但是呢，你转成这样的形式，后端也需要按照你这样传输的形式，做特殊的解析。并且文本在传输过程中是相比二进制效率低的，那么对于我们动辄几十M几百M的文件来说是速度是更慢的。

---

响应状态码

参考文献（友情链接）：

1.文件上传详细介绍请点击这里（我也在这里学习颇多）

2.http请求报文包含三个部分（我也在这里学习颇多）