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 ...
随机推荐
- 很实用的h5实现名片扫描识功能快速结合市场运营
功能描述: 点击名片识别按钮,将名片上的个人信息扫描并解析出来显示. 实现步骤: 1.点击第一个页面上的名片识别按钮,调出手机摄像头和相册,让用户进行选择 2.获取照片或者图片的base64数据,传值 ...
- css实现自适应正方形的多种方法实现
方案一:CSS3 vw 单位 CSS3 中新增了一组相对于可视区域百分比的长度单位vw.vh.vmin.vmax.其中vw是相对于视口宽度百分比的单位,1vw = 1% viewport width, ...
- 央行数字货币(CBDCs)的互操作性至关重要
CBDCs(央行数字货币)将在我们的有生之年产生重大的金融转变.然而,除非这些工具吸取了法定货币的教训,否则创新将毫无意义.互操作性一直是影响CBDC采用和功能的最重要障碍之一.因此,各国央行在这一理 ...
- SQLserver-MySQL的区别和用法
对于程序开发人员而言,目前使用最流行的两种后台数据库即为MySQL and SQL Server.这两者最基本的相似之处在于数据存储和属于查询系统.你可以使用SQL来访问这两种数据库的数据,因为它们都 ...
- Jenkins - 解决集成 jmeter+ant 发送邮件时报错:java.lang.ClassNotFoundException: javax.mail.internet.MimeMessage
jenkins + jmeter +ant 发送邮件失败 问题原因 其实就是缺失 jar 包,导致某些类找不到了 解决方案 点击该网站,下载commons-email.jar包 点击该网站,下载act ...
- redis(二十三):Redis 集群(proxy 型)二
redis的确是一个非常高效的缓存服务器,但是单台redis服务器的内存管理能力有限,如果一味的加大内存的话会导致redis服务器的性能下降,所以就必须要搭建redis集群来提供服务.在redis官方 ...
- Go Pentester - TCP Proxy
Building a TCP Proxy Using io.Reader and io.Writer Essentially all input/output(I/O). package main i ...
- Ethical Hacking - NETWORK PENETRATION TESTING(14)
MITM - ARP Poisoning Theory Man In The Middle Attacks - ARP Poisoning This is one of the most danger ...
- DEBUG ArrayList
1,ArrayList面试必问 说说ArrayList和LinkedList的区别? ArrayList基于数组实现,LinkedList基于链表实现,不同的数据结构决定了ArrayList查询效率比 ...
- vue邪道玩法 : 把vue实例存在别的地方,以及可能会遇到的问题
一般来说,VUE项目中,this指向VUE实例. 但有的时候,某些代码会改变this的指向. 这时,可以用一个临时变量存储VUE实例. test1(){ var _this = this // 把vu ...