Vue axios 发送 FormData 请求





一、简介
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 格式化会过滤空数组数据:

方式三,数组会被转换成字符串(这种不是特殊情况一般不会使用上)

三、上面方式,参数格式化之后:
方式一 格式化出来的数据:

方式二 格式化出来的数据:

方式三 格式化出来的数据:

参考链接


Vue axios 发送 FormData 请求

发布者

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注