el-upload添加请求头

solution

Vue项目，需要上传文件

task

使用elementUI的el-upload组件实现文件的上传

action

代码如下

  <el-upload
            class="upload-demo"
            drag
            action="http://47.92.112.6:8000/api/admin/calc/file"
            :multiple="false"
            :show-file-list="true"
            accept=".rar,.zip"
            :limit=1
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">只能上传rar/zip文件</div>
        </el-upload>
1
2
3
4
5
6
7
8
9
10
11
12
13

上传文件报错 出现跨域问题，查看请求头因为没有携带token，（项目中使用jwt作为用户身份凭证）

于是增加请求头，查看官网API，需要增加 headers请求头

修改代码如下，增加 headers

<el-upload
            class="upload-demo"
            drag
            action="http://47.92.112.6:8000/api/admin/calc/file"
            :multiple="false"
            :show-file-list="true"
            accept=".rar,.zip"
            :limit=1
            :headers="headers"
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">只能上传rar/zip文件</div>
        </el-upload>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

computed内增加如下内容

computed: {
    headers(){
      const jwt=localStorage.getItem('jwt')
      return{
        jwt:jwt
      };
    },
1
2
3
4
5
6
7

获取存储在localStorage中的jwt，加载请求头上
调试，文件上传成功，请求头如下

result

在vue中，computed表示“计算属性”，是根据依赖关系进行缓存的计算，只有在它的相关依赖发生改变时才会进行更新，所以在computed中获取jwt，便于获得最新的数据

以前没有学过Vue，直接上手写项目，多有不熟练之处，敬请指正