vue 在使用post提交json数据、表单数据，object数据，解决方案

方案1：使用qs

示例

formObject数据是这样的

 var formObject={
 id:0,
 name:'cplvfx',
 like:[{id:1,name:'苹果'},{id:2,name:'香蕉'}],
 more:{
 age:20,
 sex:'男'
 }
 }

使用 qs转换格式 

that.$axios.post("/", that.$qs.stringify(that.formObject)).then((res) => {
//你的代码
});

 提交时的数据格式是

id: 0
name: cplvfx
like[0][id]: 1
like[0][name]: 苹果
like[1][id]: 2
like[1][name]: 香蕉
more[age]: 20
more[sex]: 男

1、安装

npm install qs

2、在组件中应用

import qs from 'qs'

3、主要使用qs.parse(),qs.string

qs.parse()是将URL解析成对象的形式
qs.stringify()是将对象 序列化成URL的形式，以&进行拼接

如果遇到post提交表单，axios会将数据格式转换成 FormData对象

这样就不需要对 js的object 对象数据转formdata格式化

4、具体例子如下

let data = qs.stringify({
    "username":this.username,
    "password":this.password
});

username=renping&password=123456

如果遇到post提交表单，axios会将数据格式转换成 FormData对象

这样就不需要对 js的object 对象数据转formdata格式化

 方案2：使用js原生 FormData对象进行提交

Form Data参考数据，里面包含数组等特殊字段数据

 var formObject={
 id:0,
 name:'cplvfx',
 like:[{id:1,name:'苹果'},{id:2,name:'香蕉'}],
 more:{
 age:20,
 sex:'男'
 }
 }

要保证提交时的数据是这样的。（因为表单提交时的数据格式要求）

id: 0
name: cplvfx
like[0][id]: 1
like[0][name]: 苹果
like[1][id]: 2
like[1][name]: 香蕉
more[age]: 20
more[sex]: 男

我们需要这样写

var that=this;
 
var formData = new FormData();
formData.append("id",0);
formData.append("name","cplvfx");
formData.append("like[0][id]",1);
formData.append("like[0][name]","苹果");
formData.append("like[1][id]",2);
formData.append("like[1][name]","香蕉");
formData.append("more[age]",20);
formData.append("more[sex]","男");
 
//发起提交请求
that.$axios.post("/",formData).then((res) => {
//你的代码
});

这种提交方式 jq 和vue同样适用

显然在没有 qs插件方便

 方案3：把object转换成FormData对象再进行提交

可以根据“方案2”写一个循环把object对象转换成FormData对象

---

延伸阅读 

new FormData()对象的作用以及使用方法_uu盘的博客-CSDN博客_newformdata