码迷,mamicode.com
首页 > 移动开发 > 详细

vue填坑(二) 让axios发送表单形式数据

时间:2017-12-06 13:03:28      阅读:333      评论:0      收藏:0      [点我收藏+]

标签: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发送表单形式数据

标签:enc   request   erro   strong   数据   base64   vue   nsf   localhost   

原文地址:http://www.cnblogs.com/zhuzy/p/7991770.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!