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)
。
################################### 请求方式一，全局使用
const
service = axios.
create
({
baseURL
:
''
,
timeout
:
20000
,
headers
: {
'Content-Type'
:
'application/x-www-form-urlencoded'
service.
defaults
.
transformRequest
=
(
data
) =>
{
return
stringify
(data)
################################### 请求方式二，局部使用
axios
({
method
:
'post'
,
url
:
'http://localhost:8080/dzm'
,
data
: {
username
:
'dzm'
,
password
:
'dzm123456'
transformRequest
: [
function
(
data
) {
return
stringify
(data)
headers
: {
'Content-Type'
:
'application/x-www-form-urlencoded'
################################### 转换方法封装
function
stringify
(data) {
const
formData =
new
FormData
()
for
(
const
key
in
data) {
if
(data.
hasOwnProperty
(key)) {
if
(data[key]) {
if
(data[key].
constructor
===
Array
) {
if
(data[key][
0
]) {
if
(data[key][
0
].
constructor
===
Object
) {
formData.
append
(key,
JSON
.
stringify
(data[key]))
}
else
{
data[key].
forEach
(
(
item, index
) =>
{
formData.
append
(key +
`[
${index}
]`
, item)
}
else
{
formData.
append
(key +
'[]'
,
''
)
}
else
if
(data[key].
constructor
===
Object
) {
formData.
append
(key,
JSON
.
stringify
(data[key]))
}
else
{
formData.
append
(key, data[key])
}
else
{
if
(data[key] ===
0
) {
formData.
append
(key,
0
)
}
else
{
formData.
append
(key,
''
)
return
formData
方式二，使用
qs
组件，但是
qs
格式化会过滤空数组数据：
import axios from 'axios'
import qs from 'qs'
const service = axios.create({
baseURL: '',
timeout: 20000,
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
service.interceptors.request.use(config => {
const token = Vue.ls.get(ACCESS_TOKEN)
if (token) {
config.headers['X-Token'] = token
config.data = qs.stringify(config.data)
return config
}, err)
axios({
method: 'post',
url: 'http://localhost:8080/dzm',
data: {
username: 'dzm',
password: 'dzm123456'
transformRequest: [
function (data) {
return qs.stringify(data)
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
方式三，数组会被转换成字符串（这种不是特殊情况一般不会使用上）
import axios from 'axios'
axios({
method: 'post',
url: 'http://localhost:8080/dzm',
data: {
username: 'dzm',
password: 'dzm123456'
transformRequest: [
function (data) {
return stringify(data)
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
function stringify (data) {
let ret = ''
for (const it in data) {
ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
ret = ret.substring(0, ret.lastIndexOf('&'))
return ret
三、上面方式，参数格式化之后：
方式一 格式化出来的数据：
// 数组无值
id: 2086
intention:
follower_id[]:
concat_material[]:
// 数组有值
id: 2086
intention:
follower_id[0]: 351
follower_id[1]: 66
// 数组 json 为空会被转成正常的数组，有值会被转成字符串，所以服务器需要注意处理
concat_material: [{"fname":"视频订单.xls","key":"local/other/099f4be38fb8e69bb031cbc36ed283a6.xls"}]
方式二 格式化出来的数据：
// 数组无值
id: 2086
intention:
// 数组有值
id: 2086
intention:
follower_id[0]: 351
follower_id[1]: 66
concat_material[0][fname]: 视频订单.xls
concat_material[0][key]: local/other/099f4be38fb8e69bb031cbc36ed283a6.xls
concat_material[1][fname]: 视频订单1.xls
concat_material[1][key]: local/other/099f4be38fb8e69bb031cbc36ed283a8.xls
方式三 格式化出来的数据：
// 数组无值
id: 743
intention: 2
follower_id:
concat_material:
// 数组有值
id: 2086
intention:
follower_id: 66,351
concat_material: [object Object],[object Object]
