form-data和x-www-form-urlencoded的区别

form-data和x-www-form-urlencoded区别

form-data 和 x-www-form-urlencoded 都是表单请求的一种格式，主要区别有两点。

编码方式不同

我们先说x-www-form-urlencoded，它的编码方式就隐藏在名字里：urlencoded。看到这个关键词，你想到了什么？

没错，就是js中的encodeURI函数，这个函数的功能，我相信大家并不陌生，我们就不在赘述了。

x-www-form-urlencoded就可以理解为被encodeURI编码过的querystring。

比如，我们用x-www-form-urlencoded提交如下内容：

name: 张三
age: 18

实际上，请求体会被编码成如下格式：

name=%E5%BC%A0%E4%B8%89&age=18

这里需要强调一下，urlencoded这种格式并不是json格式，因此不能使用json库将其转成json。

接下里，我们来讲form-data，完整的表示为multipart/form-data。

multipart/form-data这种格式，会把表单内容分成多个部分，这也就是multipart的含义。

比如，同样是上面的表单内容，使用multipart/form-data格式，请求体将会类似下面这样：

1 2 3 4 5 6 7 8 9

--AaB03x Content-Disposition: form-data; name="name" Content-Type: text/plain 张三 --AaB03x Content-Disposition: form-data; name="age" Content-Type: text/plain 18 --AaB03x--

接下来，我们详细说一下其中的细节。

• --AaB03x，boundary，也就是边界，它就是分割表单不同part的分界线。AaB03x是一个随机字符串，需要保证整个请求体都是用相同的boundary。
• name="name"和name="age"，这个很容易理解，就是每个part的名字，也就是字段名。
• Content-Type，每个part的内容类型，我们这里因为传的是普通文本，所以内容类型使用text/plain。
• --boundary表示一个part的开始，--boundary--表示所有part都结束了。

除了上面的请求体，我们的请求头需要向下面这样设置：

Content-Type: multipart/form-data; boundary=AaB03x

这里关键的部分就是boundary=AaB03x，定义分界线的随机数是什么，请求体中使用的随机数，需要和请求头中定义的随机数一致。

好了，这两种编码方式的基本格式，我们已经讲完了，你的第一感觉是什么，是不是觉得multipart/form-data的格式，要比x-www-form-urlencoded复杂的多。

没错，这正x-www-form-urlencoded的一大优点——对于普通的文本内容，x-www-form-urlencoded占用的字节更少。

支持的内容类型不同

x-www-form-urlencoded只支持普通的文本内容，而multipart/form-data的每一个part部分，都支持不同的Content-Type，比如图片、音频、视频等。

比如，我们向表单里面添加一个图片：

1 2 3 4 5 6 7 8 9 10 11 12 13

--AaB03x Content-Disposition: form-data; name="name" Content-Type: text/plain 张三 --AaB03x Content-Disposition: form-data; name="age" Content-Type: text/plain 18 --AaB03x Content-Disposition: form-data; name="age"; filename="test.jpg" Content-Type: image/jpeg xxxxxxxx --AaB03x--

和普通的文本内容不同的是，我们增加一个filename参数，来表示文件名称；并且把Content-Type设置成image/jpeg，表明它的格式是图片。

而且，你肯定也意识到了，multipart/form-data也不是json格式，也不能用json库读取它。

接下来，我们简单总结一下两者区别。

• x-www-form-urlencoded，一种轻型表单，只支持普通文本，优点是占用字节少。
• multipart/form-data，会把内容分成多个部分，每个部分都支持不同的格式，优点是支持文件上传，缺点是占用字节多。