vue填坑（二） 讓axios發送表單形式資料

標籤：enc   request   erro   strong   資料   base64   vue   nsf   localhost   

 

(一) 使用 axios vue-axios qs

 

 1.qs是必不可少的外掛程式

npm install --save axios vue-axios qs

2.安裝完成後，在main.js插入以下代碼

//載入axios
import Qs from ‘qs‘
import axios from ‘axios‘
import VueAxios from ‘vue-axios‘
var axios_instance = axios.create({
baseURL:‘http://localhost‘, //自行修改url
transformRequest: [function (data) {
data = Qs.stringify(data);
return data;
}],
headers:{‘Content-Type‘:‘application/x-www-form-urlencoded‘}
})
Vue.use(VueAxios, axios_instance)

 

3.在vue模組中可以這樣使用

this.$http.post(‘url‘, {
id:1
}).then(response => {
console.log(response)
}).catch( error => {
console.log(error);
});

 

（二）

1.安裝axios

npm install axios  --save  2.在main.js插入以下代碼import axios from ‘axios‘ axios.defaults.baseURL = ‘http://localhost:xxx/api/‘; Vue.prototype.$http = axios; 3. axios 在組件中使用  不帶參數：this.$http.post(‘TableList/TableLoad‘).then(response => {　}, response => {　})   formData形式上傳資料:　　let fd = new FormData();　　fd.append(‘file‘, file);//這裡上傳的是一個圖片檔案，以base64傳遞　　this.$http.post(‘fileupload/FileUpLoad‘,fd,{　　　　headers:{　　　　‘Content-Type‘:‘multipart/form-data‘   //hearder 很重要，Content-Type 要寫對　　　　}　　}).then(response => { 　　}　　}, response => { 　　})

vue填坑（二） 讓axios發送表單形式資料