Upload 上传 el-upload 上传配置请求头为Content-Type: "multipart/form-data"
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"的更多相关文章
- 谈谈axios配置请求头content-type
现在前端开发中需要通过Ajax发送请求获取后端数据是很普遍的一件事情了,鉴于我平时在撸码中用的是vue技术栈,今天这里来谈谈我们常用的发Ajax请求的一个插件-axios. > 现在网上可能发送 ...
- axios配置请求头content-type
现在前端开发中需要通过Ajax发送请求获取后端数据是很普遍的一件事情了,鉴于我平时在撸码中用的是vue技术栈,今天这里来谈谈我们常用的发Ajax请求的一个插件—axios.> 现在网上可能发送A ...
- Nginx配置请求头
最近发现一个问题: IOS访问后台接口是,总是application/json;charset=utf-8 但是后台接口只支持大写的UTF-8,修改了Nginx的请求头之后正常. proxy_set_ ...
- html5 file upload and form data by ajax
html5 file upload and form data by ajax 最近接了一个小活,在短时间内实现一个活动报名页面,其中遇到了文件上传. 我预期的效果是一次ajax post请求,然后在 ...
- upload三种上传方式(上)---Servlet---post---commons-fileupload.1.2.1.jar方式请求上传文件
上传前进行的配置选项: 1.在下方的Servers中,右键你的tomcat--open,选中下面两个配置. 第一个:Serve modules without publishing 作用:tomcat ...
- 《Play for Java》学习笔记(六)文件上传file upload
一. Play中标准方法 使用表单form和multipart/form-data的content-type类型. 1.Form @form(action = routes.Application.u ...
- React实战之Ant Design—Upload上传_附件上传
React实战之Ant Design—Upload上传_附件上传 Upload组件大家都在官方文档中看过了,但写的时候还是会遇到许多问题,一些新手看了文档后感觉无从下手,本文过多的简绍就不说了,直接看 ...
- iview Upload组件多个文件上传
使用 iview Upload 上传组件 手动上传 包括单个文件和多个文件 思路:创建一个数组 把需要上传的文件 push到这个数组里面 1.引用组件 2.手动上传,根据官方文档 设置:before ...
- SpringMVC 实现文件上传与下载,并配置异常页面
目录 上传文件的表单要求 Spring MVC实现上传文件 需要导入的jar包 配置MultipartResolver解析器 编写接收上传文件的控制器 Spring MVC实现文件下载 下载文件时的h ...
随机推荐
- js小案例(排他案例)
描述:点击哪个,哪个就变蓝色,其余的都是粉色 <!DOCTYPE html> <html lang="en"> <head> <meta ...
- CSS技术让高度自适应减少很多不必要的检测
高度自适应第一种情况 1.高度不去设置,或者高度设置auto 内容撑开父元素的高度.2.内容撑开父元素的高度 -> 最小高度的设置 min-height3.浮动元素添加高度自适应 -> 添 ...
- 使用CodeMirror插件遇到的问题
CodeMirror的正常使用: //首先通过<script>标签引入相应的js,这个就不必说了 var myCodeMirror = CodeMirror.fromTextArea(my ...
- day71 django收尾
目录 一.Auth模块 1 简介 2 方法总结 3 如何扩展auth_user表 二.bbs表介绍 1 项目开发流程 2 bbs七张表关系 一.Auth模块 1 简介 在我们创建好一个django项目 ...
- day12 文件操作(下)
目录 一.x模式(控制文件操作模式,与rwa同级) 1 特点 2 格式 二.b模式(控制文件读写内容的模式,与t同级) 1.b模式和t模式的区别 2 b模式应用 3 循环读取文件 三.文件操作的其他方 ...
- Java实现 LeetCode第30场双周赛 (题号5177,5445,5446,5447)
这套题不算难,但是因为是昨天晚上太晚了,好久没有大晚上写过代码了,有点不适应,今天上午一看还是挺简单的 5177. 转变日期格式 给你一个字符串 date ,它的格式为 Day Month Yea ...
- CSS3 文字边框 -webkit-text-stroke 镂空的字体
CSS边框的一个不足就是只有矩形的元素才能使用. -webkit-text-stroke可以为文字添加边框.它不但可以设置文字边框的宽度,也能设置其颜色. 而且,配合使用color: transpar ...
- 用scratch编程大炮打幽灵
首先来看看效果: 是不是很炫酷呢?想知道具体程序的话请关注微信公众号!
- DirectX11 With Windows SDK--35 粒子系统
前言 在这一章中,我们主要关注的是如何模拟一系列粒子,并控制它们运动.这些粒子的行为都是类似的,但它们也带有一定的随机性.这一堆粒子的几何我们叫它为粒子系统,它可以被用于模拟一些比较现象,如:火焰.雨 ...
- redis pipelined 示例
redis 常用的数据类型 有序集合(sort set).无序集合 (set),hashMap redis pipelined 示例 List<Object> list = jedisTe ...