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. 从别人的代码中学习golang系列--01

    自己最近在思考一个问题,如何让自己的代码质量逐渐提高,于是想到整理这个系列,通过阅读别人的代码,从别人的代码中学习,来逐渐提高自己的代码质量.本篇是这个系列的第一篇,我也不知道自己会写多少篇,但是希望 ...

  2. Angular2-------Error: Unexpected value ‘undefined’ declared by the module ‘模块名

    请检查[app.module.ts]文件中的[declarations]模块最后是否多了一个逗号 (完)

  3. LeetCode-Queue

    简单题 1. 数据流中的移动平均值 $(leetcode-346) 暂无 2. 最近的请求次数(leetcode-933) 写一个 RecentCounter 类来计算最近的请求. 它只有一个方法:p ...

  4. Face The Right Way思维。。。

    题目再次链接 题意: 已知01序列a,求进行定长子串取反的最少操作次数,以及最少时的定长. 分析: 首先,先想一想怎么暴力吧.这样想:要保证最小,那么必然不会对同一个区间反转两次,而在k一定时,则不会 ...

  5. DLL隐式链接

    动态链接库有2种连接方式,一种是通过库直接加入(又叫隐式加载或载入时加载),一种是在运行时加入.后者很好理解,比如LoadLibrary(),GetProcAddress()获取想要引入的函数,使用完 ...

  6. postman设置页面详解

    设置详解/General Trim keys and values in request body:如果使用form-data或者url-encoded的方式向服务器发送数据:将该选项设置为ON,则会 ...

  7. 记一次WPF程序带参数启动

    问题:总共有两个程序.第一个程序使用Process带参数启动第二个程序. 网上一堆人都说什么重写Main入口啊 什么的.然后还一堆人跟着复制发文章.我也是醉了,简直是坑人.为何要舍近求远,直接重写AP ...

  8. VulnHub::DC-1

    实验环境 一共有五个flag,有多种方法去提权,我们最终目标是去拿到/root的flag.总的来说,难度不高,适合新人练手 渗透过程 0x01 信息搜集 由于不知道靶机IP地址,进行D段扫描,获得靶机 ...

  9. Scala 基础(四):Scala变量 (一) 基础

    1.概念 变量相当于内存中一个数据存储空间的表示,你可以把变量看做是一个房间的门 牌号,通过门牌号我们可以找到房间,而通过变量名可以访问到变量(值). 2 变量使用的基本步骤 1) 声明/定义变量 ( ...

  10. java 面向对象(二十一):属性的赋值顺序

    * ①默认初始化 * ②显式初始化/⑤在代码块中赋值 * ③构造器中初始化 * ④有了对象以后,可以通过"对象.属性"或"对象.方法"的方式,进行赋值 * * ...