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,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 |
|
和普通的文本内容不同的是,我们增加一个filename参数,来表示文件名称;并且把Content-Type设置成image/jpeg,表明它的格式是图片。
而且,你肯定也意识到了,multipart/form-data也不是json格式,也不能用json库读取它。
接下来,我们简单总结一下两者区别。
- x-www-form-urlencoded,一种轻型表单,只支持普通文本,优点是占用字节少。
- multipart/form-data,会把内容分成多个部分,每个部分都支持不同的格式,优点是支持文件上传,缺点是占用字节多。