封裝axios和上傳圖片方法
阿新 • • 發佈:2018-11-30
- 頁面呼叫,post為例
this.$post(url, data, res => {
if (res.code == 1) {
-------成功返回資料
} else {
console.log(res.msg);
}
});
- 頁面呼叫 上傳圖片
<input type="file" accept="image/*" @change="upPhoto($event)">
upPhoto(e) { let imgSrc = e.srcElement.files[0]; let fordata = new FormData(); fordata.append("images", imgSrc); if (/^image/.test(imgSrc.type)) { this.$upload("/image/upload", fordata, res => { if (res.status === 1) { ------上傳成功 console.log(res.url; } else { this.$message.error("上傳失敗!"); } }); } else { this.$notify.error({ title: "錯誤", message: "請上傳圖片格式的檔案" }); } },
- js封裝
var Axios = axios.create({ baseURL: '',//本地做反向代理,所有的介面地址前面都會加上baseURL timeout: 2000,//請求超過2s自動取消 responseType: "json", withCredentials: true, // 是否允許帶cookie這些 headers: { "Content-Type": "application/x-www-form-urlencoded;charset=utf-8" } }); //請求前的攔截 Axios.interceptors.request.use( config => { // 在傳送請求之前做某件事 if (config.method === "post") { // 序列化 config.data = qs.stringify(config.data); } return config; }, error => { // error 的回撥資訊 return Promise.reject(error.data.error.message); } ); //返回狀態判斷(新增響應攔截器) Axios.interceptors.response.use( res => { //對響應資料做些事 if (res.data.code === -1) { } return res.data; }, error => { let errorInfo = error.data.error ? error.data.error.message : error.data; return Promise.reject(errorInfo); } ); function $get(Url, data, handle, err) { Axios.get(Url, data).then(res => { handle(res); }).catch(error => { if (err) { err(error); } console.log(error); }); }; function $post(Url, data, handle) { Axios.post(Url, data).then(res => { handle(res); }).catch(error => { console.log(error); }); }; //上傳圖片的方法 function $upload(Url, data, handle) { let instance = axios.create({ baseURL: '', headers: { 'Content-Type': 'multipart/form-data' } }); instance.post(Url, data).then(res => { handle(res.data); }).catch(error => { console.log(error); }) };