element-ui中的upload组件带token的两种方法

最新推荐文章于 2023-06-09 18:17:26 发布

PiZriN

最新推荐文章于 2023-06-09 18:17:26 发布

阅读量1.4k

点赞数 1

分类专栏：前端文件上传文章标签： java json vue.js elementui 前端

本文链接：https://blog.csdn.net/PiZriN/article/details/127628590

版权

前端文件上传专栏收录该内容

1 篇文章 0 订阅

订阅专栏

方法1(默认方式)：

<el-upload
  action="http://localhost:9090/workbench/activity/importExcel";
  multiple
  :limit="3"
  :headers="myHeaders"    //注:此处也可以使用computed来传动态值
  :on-success="sucH">	//上传成功后返回的信息
  <el-button size="small" type="primary">点击上传1</el-button>
</el-upload>
data: {
  myHeaders: {
      token: "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJhdWQiOiI0MGY2Y2RlYTBiZDM0YWNlYjc3NDkyYTE2NTZkOWZiMyIsImV4cCI6MTY2NzUyNjAxMX0.RCghA1LFJy01Q5HChlc4ILAIPXOsJqLWnA44LnYFVws"
  }
},

方法2（不用action，改用自写ajax方式）：

<el-upload
  action="#"
  :before-upload="beforeUpload"
  multiple
  :limit="3"
  :on-success="sucH">
  <el-button size="small" type="primary">beforeUpload方式上传</el-button>
</el-upload>
beforeUpload:function (file) {
    var fd = new window.FormData();
    fd.append('key', file, 'fileName')
    axios.post("http://localhost:9090/workbench/activity/importExcel";, fd, {
        headers: {
            token: "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJhdWQiOiI0MGY2Y2RlYTBiZDM0YWNlYjc3NDkyYTE2NTZkOWZiMyIsImV4cCI6MTY2NzUyNjAxMX0.RCghA1LFJy01Q5HChlc4ILAIPXOsJqLWnA44LnYFVws"
        }
    }).then(function (res) {
      console.log(res);
    });
    return false // 返回false不会自动上传
}