Element-ui文件上传报错 未授权401

Element-ui文件上传报错 未授权401

今天发现，做完登录功能后，使用Element-ui里的上传方法时控制台报未授权401错误，原因是上传时未将token赋给上传组件的headers

百度了很多方法 都会报错 然后自己摸索出一种方法亲测有用

我的前端框架是vue-admin-element，后端是koa

话不多说，代码如下

1 在el-upload里设置headers
:headers=“headers”

<template>
  <div>
    <div class="filter-container">
      <!-- element提供的上传控件 在后端写一个upload方法
      action：点击上传时 需要把图片上传到哪个地址
      on-success:上传成功后的回调函数
      show-file-list：上传多张图片时是否显示图片列表 这里一次只上传一张 所以不显示图片列表-->
      <el-upload
        class="upload-demo"
        action="http://localhost:3000/swiper/upload"
        :headers="headers"
        :on-success="uploadSuccess"
        :show-file-list="false"
      >
        <el-button size="small" type="primary">点击上传</el-button>
      </el-upload>
    </div>
    <!-- 将data中的swiperList显示到界面上 -->
    <el-table v-loading="loading" :data="swiperList" stripe style="width: 100%">
      <el-table-column type="index" width="50"></el-table-column>
      <el-table-column label="图片" width="400">
        <template slot-scope="scope">
          <img :src="scope.row.download_url" alt height="50" />
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="danger" @click="onDel(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 确认删除的对话框 -->
    <el-dialog title="提示" :visible.sync="delDialogVisible" width="30%">
      <span>确定删除该图片吗</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="delDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="doDel">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

2 在data里返回headers

注 ：此处一定要将store引入进来 不然无效

<script>
// 导入store包 才能获取store下的getters下的token 
import store from '@/store'
export default{
  data(){
    return{
        swiperList: [],
        loading: false,
        // 删除提示框刚开始设为false
        delDialogVisible: false,
        swiper: {},
        headers:{
          Authorization:"Bearer "+ store.getters.token
        }
    }
  },
</script>

参考：

https://blog.csdn.net/milijiangjun/article/details/108099890
https://www.yht7.com/news/5030
https://www.cnblogs.com/ruyan-yang/p/10044379.html

谢谢各位大佬！！！