api接口处添加属性 (标红处)

// 校验台账
export const checkEquiment = (data) => {
return axios({
url: '/job/equipmentInfo/checkEquipment',
method: 'post',
data,
ContentType:'multipart/form-data'
})
}

封装axios中调用接口中配置的属性

// 二次封装axios模块,包含拦截器等信息
import Axios from 'axios'
import config from './config'
import router from '@/router'
import { MessageBox, Message, Loading } from 'element-ui'
import qs from 'qs' export default function $axios(options) {
return new Promise((resolve, reject) => {
// 创建一个axios实例
// let responseType = 'json'
if (options.responseType) {
config.responseType = options.responseType
}
//请求头Axios.create创建之前做判断,拿到接口中配置的属性,设置请求头为config.headers={'Content-Type': options.ContentType}
    console.log(options.ContentType)
if(options.ContentType){
config.headers = {
'Content-Type': options.ContentType
}
}
const axios = Axios.create({
baseURL: config.baseUrl,
headers: config.headers,
timeout: config.timeout,
withCredentials: config.withCredentials
}) // 定义请求次数(用于判断请求是否已经全部响应)
let requestCount = 0
let loading
// (客户端请求前)显示loading
function showLoading() {
if (requestCount === 0) {
loading = Loading.service({
lock: true,
text: '拼命加载中...'
// spinner: 'el-icon-loading', // loading样式类名
// background: 'rgba(0,0,0,0.5)',
// customClass: 'create-isLoading'
})
}
requestCount++
}
let timer
// (服务器响应后)尝试隐藏loading
function tryHideLoading() {
requestCount--
// 采用setTimeout是为了解决一个请求结束后紧接着有另一请求发起导致loading闪烁的问题
timer = setTimeout(() => {
if (requestCount === 0) {
loading.close()
clearTimeout(timer)
}
})
} // 请求拦截器
axios.interceptors.request.use(
config => {
// 在请求头里添加系统编码
config.headers.systemCode = '01'
// 解决get请求传递数组参数的问题
if (config.method === 'get') {
config.paramsSerializer = function(params) {
return qs.stringify(params, {
arrayFormat: 'repeat'
})
}
}
// console.log(options.loading)
if (options.loading != false) {
showLoading()
} //
return config
},
error => {
loading.close()
// 请求发生错误时
console.log('request:', error)
// 判断请求超时
if (error.code === 'ECONNABORTED' && error.message.indexOf('timeout') !== -1) {
console.log('timeout请求超时')
}
// 需要重定向到错误页面
const errorInfo = error.response
if (errorInfo) {
error = errorInfo.data // 页面那边catch的时候就能拿到详细的错误信息,看最下边的Promise.reject
const errorStatus = errorInfo.status // 404 403 500 ...
router.push({
path: `/error/${errorStatus}`
})
}
return reject(error) // 在调用的那边可以拿到(catch)你想返回的错误信息
}
)
// response 响应拦截器
axios.interceptors.response.use(res => {
tryHideLoading()
if (res.data.code === 10002) {
MessageBox.alert('登陆信息超时,请重新登陆!', '登陆超时', {
confirmButtonText: '跳转到登陆页面',
callback: () => {
// 确定跳转到登陆页面后,清除用户的登陆信息
sessionStorage.removeItem('userInfo')
window.location.href = '/'
}
})
} else {
return res.data
}
},
err => {
loading.close()
if (err && err.response) {
switch (err.response.status) {
case 400:
err.message = '请求错误'
break
case 401:
err.message = '未授权,请登录'
break
case 403:
err.message = '拒绝访问'
break
case 404:
err.message = `请求地址出错: ${err.response.config.url}`
break
case 408:
err.message = '请求超时'
break
case 500:
err.message = '服务器内部错误'
break
case 501:
err.message = '服务未实现'
break
case 502:
err.message = '网关错误'
break
case 503:
err.message = '服务不可用'
break
case 504:
err.message = '网关超时'
break
case 505:
err.message = 'HTTP版本不受支持'
break
default:
}
}
console.error(err)
return reject(err) // 返回接口返回的错误信息
}
)
// 请求处理
axios(options).then(res => {
resolve(res)
return false
}).catch(error => {
reject(error)
})
})
}

此时再调此接口时

Upload 上传 el-upload 上传配置请求头为Content-Type: "multipart/form-data"的更多相关文章

  1. 谈谈axios配置请求头content-type

    现在前端开发中需要通过Ajax发送请求获取后端数据是很普遍的一件事情了,鉴于我平时在撸码中用的是vue技术栈,今天这里来谈谈我们常用的发Ajax请求的一个插件-axios. > 现在网上可能发送 ...

  2. axios配置请求头content-type

    现在前端开发中需要通过Ajax发送请求获取后端数据是很普遍的一件事情了,鉴于我平时在撸码中用的是vue技术栈,今天这里来谈谈我们常用的发Ajax请求的一个插件—axios.> 现在网上可能发送A ...

  3. Nginx配置请求头

    最近发现一个问题: IOS访问后台接口是,总是application/json;charset=utf-8 但是后台接口只支持大写的UTF-8,修改了Nginx的请求头之后正常. proxy_set_ ...

  4. html5 file upload and form data by ajax

    html5 file upload and form data by ajax 最近接了一个小活,在短时间内实现一个活动报名页面,其中遇到了文件上传. 我预期的效果是一次ajax post请求,然后在 ...

  5. upload三种上传方式(上)---Servlet---post---commons-fileupload.1.2.1.jar方式请求上传文件

    上传前进行的配置选项: 1.在下方的Servers中,右键你的tomcat--open,选中下面两个配置. 第一个:Serve modules without publishing 作用:tomcat ...

  6. 《Play for Java》学习笔记(六)文件上传file upload

    一. Play中标准方法 使用表单form和multipart/form-data的content-type类型. 1.Form @form(action = routes.Application.u ...

  7. React实战之Ant Design—Upload上传_附件上传

    React实战之Ant Design—Upload上传_附件上传 Upload组件大家都在官方文档中看过了,但写的时候还是会遇到许多问题,一些新手看了文档后感觉无从下手,本文过多的简绍就不说了,直接看 ...

  8. iview Upload组件多个文件上传

    使用  iview Upload 上传组件 手动上传 包括单个文件和多个文件 思路:创建一个数组 把需要上传的文件 push到这个数组里面 1.引用组件 2.手动上传,根据官方文档 设置:before ...

  9. SpringMVC 实现文件上传与下载,并配置异常页面

    目录 上传文件的表单要求 Spring MVC实现上传文件 需要导入的jar包 配置MultipartResolver解析器 编写接收上传文件的控制器 Spring MVC实现文件下载 下载文件时的h ...

随机推荐

  1. int c, int ndigit[10]; ++ndigit[c-'0'];

    for example c-'0' is an integer expression with a value between 0and 9 corresponding to the characte ...

  2. Android 用视频做页面背景

    不知道怎么开头,直接代码. xml:RelativeLayout布局,MyVideoView放在第一位,其他的放到之下就可以. <MyVideoView android:id="@+i ...

  3. python-多任务-进程

    什么是进程? 程序是静态的,当程序运行起来就叫做进程. 进程是操作系统分配资源的基本单元. 进程.线程的区别与优缺点 1. 定义的不同: 进程是系统进行资源分配的最小单位. 线程是进程的一个实体,是C ...

  4. 主流App自动化测试框架对比

        1.主流App自动化测试框架对比 2.Appium自动化测试框架 官方网址:http://appium.io/ 跨架构:支持原生.混合以及web移动应用 跨平台:Android & I ...

  5. 如何使用CSS创建巧妙的动画提示框

    当你的用户需要一些额外的上下文来放置图标,或者当他们需要一些保证来点击按钮,或者可能是一个复活节彩蛋的标题来搭配一个图片时,工具提示是一个很好的方法来增强用户界面.现在让我们来制作一些动画工具提示,只 ...

  6. 邓布利多拍了拍你,并递来一份CSS魔法

    校长:阿不思·邓布bai利多 亲爱的少年:我们愉快地通知您,您已获准在CSS魔法学校就读.特此带给你一份CSS魔法秘籍,代码简单,支持个性化定制.学期定于今日开始,我们将在此静候您的猫头鹰带来您的回信 ...

  7. ::before 和 :after 中双冒号和单冒号有什么区别?

    在 CSS 中伪类一直用 : 表示,如 :hover, :active 等 伪元素在CSS1中已存在,当时语法是用 : 表示,如 :before 和 :after 后来在CSS3中修订,伪元素用 :: ...

  8. SQLAlchemy04 /SQLAlchemy查询高级

    SQLAlchemy04 /SQLAlchemy查询高级 目录 SQLAlchemy04 /SQLAlchemy查询高级 1.排序 2.limit.offset和切片操作 3.懒加载 4.group_ ...

  9. Python之爬虫从入门到放弃(十三) Scrapy框架整体的了解

    这里是通过爬取伯乐在线的全部文章为例子,让自己先对scrapy进行一个整理的理解 该例子中的详细代码会放到我的github地址:https://github.com/pythonsite/spider ...

  10. 数据分析,numpy pandas常用api记录

    1. np.percentile(train_list["wnum1"], [10, 90, 95, 99])  计算一个多维数组的任意百分比分位数,此处的百分位是从小到大排列 2 ...