Vue中el-upload 组件添加token的方法

查看本专栏目录

关于作者

还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；CSDN知名博主，GIS领域优质创作者，深耕openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts等技术开发，欢迎加底部微信，一起交流。

热门推荐	内容链接
1	openlayers 从基础到精通，300+代码示例
2	leaflet 热门分解学习教程，150+图文示例
3	cesium 从0到1学习指南，200+代码示例
4	mapboxGL 从入门到实战，150+图文示例
5	canvas 示例应用100+，揭密底层细节
6	javascript从基础到高级，示例展示200+
7	vue2 实战指南，100+个细节深度剖析

在使用el-upload的时候，上传文件到服务器，有时候后台要求上传token，怎么处理呢？以下是一个示例。

效果图

template中片段

 <el-dialog 
      :modal-append-to-body="false" 
      title="上传文件" 
      :visible.sync="isUpload" 
      width="390px" 
      :close-on-click-modal="false" 
      ref="upload" 
  > 
<el-upload 
                  class="upload-demo" 
                   accept=".jar" 
                  drag 
                  :action="uploadUrl" 
                  :file-list="fileList" 
                  :headers="headerToken" 
                  :on-success="onSuccess" 
                  :before-upload="beforeUpload"   
> 
<i class="el-icon-upload"></i> 
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div> 
<div class="el-upload__tip" slot="tip">只能上传jar文件，且不超过30Mb</div> 
</el-upload> 
 
      <span slot="footer"> 
          <el-button type="warning" @click="cancelUpload()">取消上传</el-button> 
      </span> 
  </el-dialog> 

data()和computed:{}中数据

data(){ 
    return { 
isUpload：false,
            uploadUrl:this.$api.firmwareUpload, 
    } 
}, 
computed: { 
    
    headerToken(){ 
        return {   "authorize":localStorage.getItem('token')  }  } 
}, 

methods:{} 中核心方法数据

/*   ** 名称：上传文件*/ 
           beforeUpload(file) {                  
                var testmsg=file.name.substring(file.name.lastIndexOf('.')+1)                 
                const fileType1 = testmsg === 'jar'  
                const isLt30M = file.size / 1024 / 1024 < 30 
                if(!fileType1) {  
                    this.$message({  
                        message: '上传文件只能是 jar格式!',  
                        type: 'warning'  
                    });  
                }  
                if(!isLt30M) {  
                    this.$message({  
                        message: '上传文件大小不能超过 30MB!',  
                        type: 'warning'  
                    });  
                }  
                return fileType1  && isLt30M  
            } , 
 
        onSuccess(file, fileList){ 
            this.$message({ 
                            type: 'success', 
                            message: '上传成功！' 
                        }); 
            this.isUpload=false; 
        }, 

专栏目标

在vue和element UI联合技术栈的操控下，本专栏提供行之有效的源代码示例和信息点介绍，做到灵活运用。

提供vue2的一些基本操作：安装、引用，模板使用，computed，watch，生命周期(beforeCreate，created,beforeMount，mounted, beforeUpdate，updated, beforeDestroy，destroyed，activated，deactivated，errorCaptured，components，)、 $root , $parent , $children , $slots , $refs , props, $emit , eventbus ,provide / inject, Vue.observable, $listeners, $attrs, $nextTick , v-for, v-if, v-else,v-else-if，v-on，v-pre，v-cloak，v-once，v-model， v-html, v-text, keep-alive，slot-scope， filters, v-bind，.stop, .native, directives，mixin，render，国际化，Vue Router等