axios 上传文件 封装_vue与axios结合实现图片上传（axios封装拦截器）
1、安装axiosnpm install --save axiosnpm install qs2、新建一个http.js对axios封装
3、http.js封装/**
* Created by jyy on 2018/8/8.
* 封装统一的ajax请求，统一拦截请求，对不同的请求状态封装
* 通常说, ajax 请求错误有两种, 一种是网络问题或者代码问题所造成的 400, 500错误等,需要checkStatus方法拦截
* 另外一种是请求参数后端通不过验证, 由后端抛出的错误，需要checkCode拦截处理
*第二种根据不同的后端框架或者程序猿又可以分成两种, 一种是直接返回 json, 用一个 特别的 code 来区别正常请求返回的数据, 如:
*/
import qs from 'qs'
import axios from 'axios'
import store from '@/vuex/store'
import { baseUrl } from '@/api/env.js'
/**
* axios请求拦截器
* @param {object} config axios请求配置对象
* @return {object} 请求成功或失败时返回的配置对象或者promise error对象
**/
axios.interceptors.request.use(config => {
return config
}, error => {
return Promise.reject(error)
})
/**
* axios 响应拦截器
* @param {object} response 从服务端响应的数据对象或者error对象
* @return {object} 响应成功或失败时返回的响应对象或者promise error对象
**/
axios.interceptors.response.use(response => {
return response
}, error => {
return Promise.resolve(error)
})
/**
* 请求发出后检查返回的状态码,统一捕获正确和错误的状态码，正确就直接返回response,错误就自定义一个返回对象
* @param {object} response 响应对象
* @return {object} 响应正常就返回响应数据否则返回错误信息
**/
function checkStatus (response) {
// 如果状态码正常就直接返回数据,这里的状态码是htttp响应状态码有400，500等，不是后端自定义的状态码
// if (response && ((response.status === 200 || response.status === 304 || response.status === 400))) {
// return response.data // 直接返回http response响应的data,此data会后端返回的数据数据对象，包含后端自定义的code,message,data属性
// }
// return { // 自定义网络异常对象
// code: '404',
// message: '网络异常'
// }
return response.data
}
/**
* 检查完状态码后需要检查后如果成功了就需要检查后端的状态码处理网络正常时后台语言返回的响应
* @param {object} res 是后台返回的对象或者自定义的网络异常对象，不是http 响应对象
* @return {object} 返回后台传过来的数据对象，包含code,message,data等属性，
**/
// function checkCode (res) {
// // 如果状态码正常就直接返回数据
// console.log(res)
// if (res.code === -404) { // 这里包括网络异常，服务器异常等这种异常跟业务无关，直接弹窗警告
// alert(res.message)
// return {code: '', message: '网络错误'}
// } else { // 除了上面的异常就剩下后端自己返回的状态code了这个直接返回出去供调用时根据不同的code做不同的处理
// return res
// }
// }
export default {
post (url, data, params) {//params为头部信息 如果普通字段则使用默认头部信息，上传图片则使用传过来的头部信息
return new Promise(function (resolve, reject) {
if (params == null) {
axios({
method: 'post',
baseURL: baseUrl,
url: url,
data: qs.stringify(data),
headers: {
'X-Requested-With': 'XMLHttpRequest',
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
'token': store.getters.token
}
}).then((res) => {
resolve(checkStatus(res))
}).catch((err) => {
reject(err)
})
} else {
axios({
method: 'post',
baseURL: baseUrl,
url: url,
data: data,//上传图片的时候不可使用qs对参数格式化，否则导致无法发送参数
headers: params.headers
}).then((res) => {
resolve(checkStatus(res))
}).catch((err) => {
reject(err)
})
}
})
},
get (url, params) {
return new Promise(function (resolve, reject) {
return axios({
method: 'get',
baseURL: baseUrl,
url,
params,
timeout: 10000,
headers: {
'X-Requested-With': 'XMLHttpRequest',
'token': store.getters.token
}
}).then((res) => {
resolve(checkStatus(res))
}).catch((err) => {
reject(err)
})
})
}
}4、env.js封装，封装请求所需要的基本配置/**
* 配置编译环境和线上环境之间的切换
*
* baseUrl: 域名地址
* routerMode: 路由模式
* imgBaseUrl: 图片所在域名地址
*
*/
let baseUrl
let routerMode
const imgBaseUrl = 'http://file-el.jic.com/'
let localUrl
if (process.env.NODE_ENV === 'development') {
baseUrl = 'http://192.168.18.147:8081'
localUrl = 'http://192.168.18.147:8080'
routerMode = 'hash'
} else {
baseUrl = 'http://hrtest.jingbo.net:8081/hrs'
localUrl = 'http://hrtest.jingbo.net:8080'
routerMode = 'hash'
}
export { localUrl, baseUrl, routerMode, imgBaseUrl }5、main.js引入axios并配置基本参数import { baseUrl, localUrl } from '@/api/env.js'
import http from '@/api/http.js'
Vue.prototype.baseUrl = baseUrl
Vue.prototype.localUrl = localUrl
Vue.prototype.$http = http6、表单页面使用formData对象发送参数发送请求：
let file = document.getElementById('file').files[0]
let formData = new FormData()//使用formData对象
formData.append('file', file, file.name)
formData.append('numbers', _this.numbers)
formData.append('names', _this.names)
formData.append('grades', _this.grades.join(''))
formData.append('getTime', _this.getTime)
formData.append('company', _this.company)
formData.append('major', _this.major)
formData.append('titleId', _this.titleId)
formData.append('personId', _this.$store.state.personid)
formData.append('empNumber', _this.$store.state.empNumber)
let config = {
headers: {'Content-Type': 'multipart/form-data;charset=UTF-8'}//头部改为multipart，不适用默认头部信息
}
_this.$vux.loading.show({
text: '请求中，请稍后'
})
_this.$http.post('/updateProfessionalTech', formData, config).then((data) => {
_this.$vux.loading.hide()
if (data.status === 200) {
_this.$vux.toast.show({
type: 'success',
text: data.msg
})
} else if (data.status === 300) {
_this.$vux.toast.show({
type: 'cancel',
text: data.msg
})
}
})