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