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)
})
====================