application/x-www-form-urlencoded和multipart/form-data的区别

Posted 2020-10-10 开飞机的贝塔

在学习<form>元素时，enctype属性有三个值

enctype属性表格：

值	描述
application/x-www-form-urlencoded	在发送前编码所有字符（默认）
multipart/form-data	不对字符编码。 在使用包含文件上传控件的表单时，必须使用该值。
text/plain	空格转换为 "+" 加号，但不对特殊字符编码。

其中，当值为multipart/form-data时，<input>元素的type属性必须为file。

type属性表格：

值	描述
button	定义可点击按钮（多数情况下，用于通过 javascript 启动脚本）。
checkbox	定义复选框。
file	定义输入字段和 "浏览"按钮，供文件上传。
hidden	定义隐藏的输入字段。
image	定义图像形式的提交按钮。
password	定义密码字段。该字段中的字符被掩码。
radio	定义单选按钮。
reset	定义重置按钮。重置按钮会清除表单中的所有数据。
submit	定义提交按钮。提交按钮会把表单数据发送到服务器。
text	定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符。

后来我在学习requests模块时，再次接触到了application/x-www-form-urlencoded和multipart/form-data，下面说说深入的理解：

enctype表示MIME编码。

application/x-www-form-urlencoded ： 窗体数据被编码为名称/值对。这是标准的编码格式。

multipart/form-data ： 窗体数据被编码为一条消息，页上的每个控件对应消息中的一个部分。

text/plain ： 窗体数据以纯文本形式进行编码，其中不含任何控件或格式字符。

补充

form的enctype属性为编码方式，常用有两种： application/x-www-form-urlencoded 和 multipart/form-data ， 默认为application/x-www-form-urlencoded 。

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

当action为post时候，浏览器把form数据封装到http body中，然后发送到server。

如果没有 type=file 的控件，用默认的 application/x-www-form-urlencoded 就可以了。

但是如果有 type=file 的话，就要用到 multipart/form-data 了。浏览器会把整个表单以控件为单位分割，并为每个部分加上Content-Disposition(form-data或者file)、Content-Type(默认为text/plain)、name(控件name)等信息，并加上分割符(boundary)。

 

总结

报文主体会打上标签，这个标签就是MIME类型。通过这个标签，浏览器和服务器就能够知道数据的类型，进而采用合适的方式来处理该数据。

MIME类型结构