解决elementUI中el-upload组件上传文件时的请求头配置问题

解决elementUI中el-upload组件上传文件时的请求头配置问题

私有接口向后端请求数据时，通常需要携带身份认证的token信息，也就是请求头中要携带身份认证，这个认证信息在vue中通常写在请求拦截器里面，具体写法如下：

import axios from "axios";

// 添加请求拦截器
axios.interceptors.request.use(
  function (config) {
    
    
    // 在发送请求之前做些什么
    console.log(config);
    if (localStorage.token) {
    
    
      config.headers.Authorization = localStorage.token;
    }
    console.log(config);
    return config;
  },
  function (error) {
    
    
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

// 添加响应拦截器
axios.interceptors.response.use(
  function (response) {
    
    
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    // console.log(response)
    return response;
  },
  function (error) {
    
    
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    // this.$message.error(error.response.data);
    // // 获取错误状态码
    // const { status } = error.response;
    // console.log(status)
    // if (status === 401) {
    
    
    //   this.$message.error("token失效，请重新登录");
    //   localStorage.removeItem("mytoken");
    //   this.$router.push("/login");
    // }

    return Promise.reject(error);
  }
);

export default axios;

逻辑是向浏览器本地存储中取出token，然后在请求拦截器中设置请求头，那么发起请求后，后端会验证身份信息，验证通过就放行给数据，不通过就报错

现在我写了个文件上传的功能，用到了elementUI的el-upload组件，因为没仔细看文档，结果一直token认证失败，搞了很久，才发现el-upload上传组件在上传发送请求时，不会去使用我们设置的 axios，而是在组件内部自己封装了自己的请求方法，这个方法就是headers，需要配置好，所以正确的写法应该如下：

html部分

<el-upload class="upload-demo" :action="url" :headers="headers" :on-preview="handlePreview"
		   :on-remove="handleRemove" :limit="1" :file-list="fileList" :on-success="successUpload"
		   :show-file-list="false" accept=".zip">
	<el-button type="primary">选择并上传</el-button>

</el-upload>           

js部分

computed: {
    
    
        headers() {
    
    
            const authorization = localStorage.getItem('token') || ''
            return {
    
     authorization }
        }
    },

逻辑很清楚，html中绑定headers，:headers="headers"，JavaScript中通过计算属性获取localStorage中存储的token，大功告成！