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

})

}

})

参与评论 您还未登录,请先 登录 后发表或查看评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:数字20 设计师:CSDN官方博客 返回首页

打赏作者

weixin_39621495

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值