vue axios使用form-data的形式提交数据的问题

vue axios使用form-data的形式提交数据
vue axios request payload form data
由于axios默认发送数据时，数据格式是Request Payload，而并非我们常用的Form Data格式，PHP后端未必能正常获取到，所以在发送之前，需要使用qs模块对其进行处理。

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

axios请求不携带cookie
this.axios.defaults.withCredentials = true;// 跨域携带cookie
在跨域的情况下不仅前端要设置withCredentials，后端也是要设置Access-Control-Allow-Credentials的。

=================
表单提交数据是名值对的方式，且Content-Type为application/x-www-form-urlencoded，而文件上传服务器需要特殊处理，普通的post请求（Content-Type不是application/x-www-form-urlencoded）数据格式不固定，不一定是名值对的方式，所以服务器无法知道具体的处理方式，所以只能通过获取原始数据流的方式来进行解析。

jquery在执行post请求时，会设置Content-Type为application/x-www-form-urlencoded，所以服务器能够正确解析，而使用原生ajax请求时，如果不显示的设置Content-Type，那么默认是text/plain，这时服务器就不知道怎么解析数据了，所以才只能通过获取原始数据流的方式来进行解析请求数据。

=================
axios.post('post.php', {
a: '1'
}).then(function(response) {
alert(response.data);
}).catch(function(error) {
alert(error);
});
由于axios默认发送数据时，数据格式是Request Payload，而并非我们常用的Form Data格式，PHP后端未必能正常获取到，所以在发送之前，需要使用qs模块对其进行处理。

import qs from 'qs';
...
axios.post('post.php', qs.stringify({
a: '1'
}))
.then( ... )
.catch( ... );
======================
通过this.$http去调用axios，如果之前你的vue-resourse也是这么写的话，可以无缝切换。换成this.axios也是没有问题的。

在入口文件main.js修改：
import qs from 'qs'

#创建一个axios实例
var axios_instance = axios.create({
#config里面有这个transformRquest，这个选项会在发送参数前进行处理。
#这时候我们通过qs.stringify转换为表单查询参数
transformRequest: [function (data) {
data = qs.stringify(data);
return data;
}],
#设置Content-Type
headers:{'Content-Type':'application/x-www-form-urlencoded'}
})
Vue.use(VueAxios, axios_instance)

以后发起http请求，如下即可：
var vm = this
this.$http.post(vm.url,data).then((response)=>{
alert(response.data.msg);
})

======================
let postData = this.$qs.stringify({
key1:value1,
key2:value2,
key3:value3,
});
this.$axios({
method: 'post',
url:'url',
data:postData
}).then((res)=>{

});
====================
上传文件
var fd = new FormData()
fd.append('file', files[0])
let config = {
headers: {
'Content-Type': 'multipart/form-data'
}
}
axios.post(that.uploadUrl, fd,config).then( res => {
console.log(res)
}).catch( res => {
console.log(res)
})
====================

巴特西

vue axios使用form-data的形式提交数据的问题

最新文章

热门文章