一、简介
axios 默认是 Payload 格式数据请求,但有时候后端接收参数要求必须是 Form Data 格式的,所以我们就得进行转换。
Payload 和 Form Data 的主要设置是根据请求头的 Content-Type 的值来的:
Payload:
Form Data:
上面三种 Content-Type 值介绍
application/json 和 application/x-www-form-urlencoded 都是表单数据发送时的编码类型。
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)。
二、发送 formdata 请求(下面有这几种方式格式化参的数据样本,用于参考比较,看需求选择方式)
方式一,自己封装一个格式化函数:
方式二,使用 qs 组件,但是 qs 格式化会过滤空数组数据:
方式三,数组会被转换成字符串(这种不是特殊情况一般不会使用上)
三、上面方式,参数格式化之后:
方式一 格式化出来的数据:
方式二 格式化出来的数据:
方式三 格式化出来的数据: