在ElementUI的上传组件el-upload中设置header_el-upload headers

在vue项目中我们发送ajax请求一般都会使用axios，并在axios中设置axios.defaults.baseURL，请求的基本地址，并在请求拦截器中设置headers

axios.interceptors.request.use(config=>{
  NProgress.start();
  // 发送请求需带上token
  config.headers.Authorization=window.sessionStorage.getItem("token")
  return config;
})
1
2
3
4
5
6

使用el-upload上传组件时，action 为必选参数，上传的地址。但此时我们为action填写地址不能不写基本地址而仅写upload，要写完整的地址。这是因为el-upload上传组件在上传发送请求时，不会去使用我们设置的axios，而是在组件内部自己封装了自己的请求方法。所以我们必须把地址写完整。
那有时在上传时会报出错误，例如‘无效token’，这是因为我们没有为此上传请求设置请求头部。el-upload组件有一个属性headers ，设置上传的请求头部

 <el-upload
              action="http://127.0.0.1:8888/api/private/v1/upload"
              :headers="headerObj"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :on-success="handleSuccess"
              list-type="picture"
            >
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">
                只能上传jpg/png文件，且不超过500kb
              </div>
            </el-upload>
1
2
3
4
5
6
7
8
9
10
11
12
13

在data中定义headerObj

headerObj: {
        Authorization: window.sessionStorage.getItem("token"),
      },
1
2
3