vue使用axios中的post请求时, 如何将json数据改为formdata类型_请求方式是application/json改成form-data

有些时候在用ajax发送post请求时 ,数据如下图⬇️

在使用axios时的默认请求如下图 ⬇️

content-Type : application/json 请求体类型默认是json格式
就连发送的数据也是 request payload 的

* 那么问题来了, 怎么才能让 axios 发送 post 请求时变得和 ajax 发送 post 请求的一样呢 ?

解决方法⬇️

1. 首先我们可以在main.js中将axios的默认headers修改成我们需要发送的类型

axios.defaults.withCredentials = true; //让ajax携带cookie
axios.defaults.headers = {
  'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
};
1
2
3
4

修改之后, 我们发送的post请求就变成我们想要的格式, 但是formdata中的内容却转化成了json格式, 并且在最后还多了一个 : (冒号)

{"username":"admin3","password":"admin123"}: 
1

2. 要想将formdata中的内容转化为对象, 我们需要操作两步, 首先在main.js中引入QS模块

// 引入 axios 和 Qs
import axios from 'axios'
import Qs from 'qs'

Vue.prototype.$http = axios
Vue.prototype.qs = Qs
1
2
3
4
5
6

其次, 在使用axios发送post请求时, 将对象用qs.stringify转化之后就OK了

this.$http({
	method:"post",
  	url:'http://dsp.mindhit.cn/boss_login/',
  	data:this.qs.stringify(this.ruleForm)
})
.then((function (response) {
  	console.log(response);
  	if(response.data.code!==0){
    	alert(response.data.msg)
  	}else{
    	this.menu=response.data.data
    	console.log(this.menu);
    	this.$router.push({path:'/HelloWorld'})  
  	}
}).bind(this))
.catch(function (error) {
  console.log(error);
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

现在这个请求就变成了这个亚子