vue-记一次使用axios封装文件上传的实操

以前没有vue的时候我们通常使用ajax进行文件上传，但是vue中建议使用axios，所以再实际生产环境，我们使用axios来封装了van-uploader,适配于公司项目的开发

const formData = new FormData();  // 声明一个FormData对象
formData.append("file", file.file);
// 获取上传地址  
let uploadUrl = ''
this.$axios.post(uploadUrl , formData, {
  //添加请求头
  headers: {
      "Content-Type": "multipart/form-data"
  }
}).then(result => {
  // 上传图片
  let resultObj = result.data
})

注意:

1. 上传的时候需要指定请求头信息:“Content-Type”: “multipart/form-data”
2. 如果遇到下面这个报错，不要惊慌仔细查看下面标注的几个地方

VUE “the request was rejected because no multipart boundary was found”

是不是有请求拦截器修改了发出请求头种的content-Type属性 ,

1. 验证方式打开浏览器F12中的NetWork,然后发起请求
2. 选择发起的请求，点击header 查看Request Header中的Content-Type属性

// 请求拦截器  检查是不是请求拦截器中有对请求头中的ContentType进行修改
axios.interceptors.request.use(
    config => {
        if (getToken('userid')) {
        }
        return config;
    },
    error => {
        return Promise.error(error);
    });

如果上一步排查没有问题，那么需要检查是不是重写了axios.defaults.transformRequest方法

本次遇到的问题就是重写了此方法，修改之前的代码如下:

axios.defaults.transformRequest = [function (params) {
    let ret = ''
    for (let it in params) {
        ret += encodeURIComponent(it) + '=' + encodeURIComponent(params[it]) + '&'
    }
    return ret
}]

问题已经很明显了，由于上面这段代码导致上传的文件被URI重新编码，后台程序不能识别导致报错

修改之后的代码如下:

axios.defaults.transformRequest = [function (params) {
    // 当请求为上传文件的时候不能经过下面这段的处理
    if(params && params instanceof FormData && params.get("file")){
        return params
    }
    let ret = ''
    for (let it in params) {
        ret += encodeURIComponent(it) + '=' + encodeURIComponent(params[it]) + '&'
    }
    return ret
}]