vue-admin 使用element UI 导入功能出现报错401现象

利用导入功能时连接接口发现报错401，有可能是跨域现象，也有可能是因为后端要求的字段没有传送

文件上传导入，后端接口要求添加header，所以配置项中必须配置headers

<el-upload
     class="import_btn"
     :action="action"
     accept=".xlsx"
     :on-success="uploadSuccess"
     :before-upload="uploadBefore"
     :show-file-list="false"
     :headers="Myhead"
>
 <el-button size="medium" icon="el-icon-download" type="success">导入</el-button>
</el-upload>

data() {
    return {
      action: '/api/admin/tokensShopLog/import',
    };
},

 

computed: {
   Myhead: function () {
      return {token: getToken()}
   }
},

上传之前判断文件类型以及大小

// 上传之前
    uploadBefore(file) {
      // 判断文件类型
      if (
        file.type !=
        'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
      ) {
        this.$message.error('请选择正确的文件类型');
        return false;
      }
      // 判断文件大小
      if (file.size > 2 * 1024 * 1024) {
        this.$message.error('上传文件不可大于2M');
        return false;
      }
},

上传时连接后端接口返回数据

// 上传成功
    uploadSuccess(res) {
      if (res.success) {
        this.getListFn(() => {
          this.$message.success(res.info);
        });
      } else {
        this.$message.error(res.info);
      }
    },

导入后结果显示