axios 上传文件 封装_axios 封装【满足常规数据上传及file上传】
axios 封装【满足常规数据上传及file上传】
request.js
/* 封装axios */
const axios = require('axios');
import {
featchApiHeader,
formApiHeader,
baseApiUrl
} from './requestUtil.js';
const {
Loading,
Message
} = require('element-ui');
import router from '@/routes/routes'
import store from '@/store/store'
import qs from 'qs'
let loadingInstance = null; //loading实例
/* 创建实例时的基础默认配置,可以在请求时进行重写覆盖 */
const instance = axios.create({
baseURL: baseApiUrl,
timeout: 5000,
method: 'post',
headers: featchApiHeader
})
/* 拦截器 */
/**
* @Description:
* - 在request 内通过对data类型的校验,区分是一般的post还是formdata文件上传
* - 根据类型的不同改变成不同的headers
* -
*/
instance.interceptors.request.use(
config => {
loadingInstance = Loading.service({
text: "请求中...",
spinner: 'el-icon-loading'
});
if (config.method.toLowerCase() == "post") {
let newdata = config.data;
if (config.data instanceof FormData) { //文件类,文件类不需要stringify
Object.assign(config.headers, formApiHeader); //修改`Content-Type`
newdata.append("accessStr", localStorage.getItem("apiToken") || '')
} else { //非文件类,stringify
//空处理
newdata = (typeof newdata == 'object' && Object.keys(newdata).length >= 0) ? newdata : {};
newdata = {
...newdata,
accessStr: localStorage.getItem("apiToken") || ''
}
newdata = qs.stringify(newdata);
}
config.data = newdata;
}
return config
},
error => {
loadingInstance.close();
Message({
showClose: true,
message: '请求错误,请您稍后重试!',
type: 'error'
});
return Promise.reject(error)
},
)
instance.interceptors.response.use(
response => {
loadingInstance.close();
let resStatus = response.status;
if (resStatus == 200) {
return Promise.resolve(response)
} else {
return Promise.reject(response)
}
},
error => {
loadingInstance.close();
if (error.response.status) {
switch (error.response.status) {
case 401: //未登录,从哪里来回哪里去
router.replace({
path: '/index',
query: {
redirect: router.currentRoute.fullPath
}
});
break;
case 403: //token过期
Message({
message: '登录过期,请重新登录',
duration: 1500
});
localStorage.removeItem("apiToken"); //清除token
store.commit("loginSuccess", ""); //全局通知loginSuccess为空
break;
case 404:
Message({
message: '网络请求不存在',
duration: 1500
});
break;
case 500, 501, 503: //服务端错误
Message({
message: '请求异常,请您稍后重试!',
duration: 1500
});
break;
default:
Message({
message: error.response.data.message,
duration: 1500
});
break;
}
return Promise.reject(error)
}
},
)
export default instance
requestUtil.js
/**
* @Description:
* - 处理请求头,
* - apitoken、针对一般的post和文件上传,设置不同的headers
* - 根据环境获取不同的baseUrl
*/
const getApitoken = () => {
return localStorage.getItem("apiToken") || '' //在登录时得到后存储起来
}
const commmonHeader = {
'Accept': 'application/json',
'Authorization': `Bearer ${getApitoken()}`
}
/* 常规的 */
export const featchApiHeader = {...commmonHeader,
'Content-Type': 'application/x-www-form-urlencoded'
}
/* 文件的 */
export const formApiHeader ={...commmonHeader,
'Content-Type': 'multipart/form-data'
}
export const baseApiUrl = process.env.VUE_APP_API_BASEURL
axios 上传文件 封装_axios 封装【满足常规数据上传及file上传】相关推荐
- 手机如何看python文件大小_如何安全地检查上传文件的大小?(How to check size of uploaded file safely in bottlepy?)...
如何安全地检查上传文件的大小?(How to check size of uploaded file safely in bottlepy?) 我真的害怕read()操作,因为它使用内存. 例如,任何 ...
- axios 上传文件 封装_axios封装和传参
axios封装和传参 1.开发环境 vue+typescript 2.电脑系统 windows10专业版 3.在开发的过程中,我们会经常使用到 axios进行数据的交互,下面我来说一下,axios封装 ...
- java怎么上传文件到web服务器_Java客户端通过Http发送POST请求上传文件到web服务器...
http://www.cnblogs.com/WilliamJiang/archive/2012/04/29/2475883.html 1.朋友的一个需求,让我给他实现,需求是这样的,需要用ASP.n ...
- python 自动点击上传以后上传文件,python使用selenium模拟点击网页实现自动导入上传文件功能...
一.环境准备 Python版本:3.4 编辑器:Pycharm excel文件:导入的excel模板 二.python代码 由于工作需要,需要每天定时导入相关excel文件进入后台数据库,由于导入的逻 ...
- 4gl 上传文件_速看!关于浙江移动微法院新版图文上传和签名的使用说明
点击关注"中国移动微法院研发基地" 浙江移动微法院文件上传目前支持多种上传方式,包括手机图库.相机.本地PDF.本地WORD.基于聊天(PDF/WORD),且每种方式上传文件时均可 ...
- 以Base64字符串形式上传文件——服务器端Java/Servlet接受请求数据中的字符串内容并转换成文件
简述 在常规的web开发过程中,大部分上传文件都是在web页面端通过表单直接提交,再由服务器端捕获请求来进行处理的.但是在前后端分离趋于一种流行趋势,再加上Android和iOS开发技术日渐成熟,大部 ...
- HDFS上传文件报错org.apache.hadoop.fs.ChecksumException: Checksum error: file:/hyk/data/hyk.txt
当从本地上传文件到HDFS中时报错 fs.FSInputChecker: Found checksum error: b[0, 69]=6d6f7765696861686168616861686861 ...
- 服务器护卫神怎么上传文件,护卫神异地备份系统怎么将数、据上传到服务器上?...
护卫神异地备份系统怎么将数.据上传到服务器上? 发布时间:2017-09-11 14:08 来源:互联网 当前栏目:软件安装 护卫神异地备份系统可以对各类数据实时或定时上传到原创FTP服务器备份,也可 ...
- linux sftp 上传文件内容为空,求linux 下 C/c++ 实现SFTP上传文件的代码,或shell 写的如何区分上传是否成功?...
如题求linux系统下C/C++实现SFTP上传文件的代码,最好有一定的中文注释,谢谢了. 或是, 我看FTP上传的shell写的比较简单,但是,如何能判断是否上传成功哪?? 如果想做上传的进度条的话 ...
最新文章
- cannot find package “github.com/json-iterator/go“cannot find package “github.com/modern-go/reflect2“
- SVN错误:SVN Working copy XXX is too old
- linux vi 撤销重做于前进后退--转
- 婚礼答谢宴ppt模板_女儿结婚请柬制作 女儿结婚宴会邀请函模板免费
- windows10系统如何设置标题栏显色
- Hibernate中saveOrUpdate()和merge()的区别
- C++设计模式之Strategy(策略模式)
- Python获取日期列表中每一天中最大的时刻对应的日期时间戳
- 【实战】Axis2后台Getshell
- XShell+XFtp无限制版本
- GB28181协议--心跳
- Anaconda下载官网
- 服务器ibmc虚拟软驱的用法,Java集成远程控制台 - FusionServer Pro E9000 服务器 iBMC (V561至V649) 用户指南 02 - 华为...
- [转]用python来开发webgame服务端(2)
- linux复制dos命令,Linux mcopy复制MSDOS格式档案命令详解
- 单片机24秒倒计时c语言,基于51单片机的篮球24秒倒计时器
- 外事不决问元芳,内事不决找搜狗------简评搜狗语音助手
- 图6——深度遍历无向图
- Cannot resolve method ‘create‘ in ‘String‘
- 计算机cpu intel,Intel的CPU后面带F是什么意思?
热门文章
- 27款实用高效的腾讯热门开源项目推荐
- VB.NET 按键代码 及组合键
- 【Linux】学习历程
- 怎么把苹果手机通讯录导入华为手机_苹果手机资料快速导入华为手机。苹果的ios系统也可以把资料导入安卓!...
- Nginx学习---Nginx的详解_【all】
- 洛谷P1074 靶形数独 [搜索]
- Java中使用poi导入、导出Excel
- [转]Sandboxie 的工作原理
- HNCU1324:算法2-2:有序线性表的有序合并(线性表)
- javscript 创建类的三种方法【转】