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}