当前位置: 首页 > news >正文

vue项目中el-upload 组件添加token的方法

在使用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和openlayers联合技术栈的操控下,本专栏提供行之有效的源代码示例。
(1)提供各种地图的加载示例:baidu、高德、google,bing,OSM,stamen,maptiler,天地图,mapbox等
(2)提供地图控件的展示示例:比例尺、鹰眼、自定义版权、旋转地图、缩放地图、缩放滑块、全屏显示等
(3)提供各种数据的加载示例:geojson、JSON、KML、WKT、WMTS、SHP、WKB、GPX、CSV、MVT、geoserver数据等
(4)提供上传解析和导出示例:上传KML、KMZ、Geojson、shp、zip等,导出Image、pdf、geojson、GML、polyline等
(5)提供各种图形的绘画示例:画点、线、圆、多边形、正方形、矩形、六星芒、自由线段、自由多边形等。
(6)提供路线轨迹相关的示例:画带有箭头的线段、实现轨迹路线动画、画闪闪发光的点划线、实现风场快速移动效果等。
(7)提供地图交互事件的示例:draw、modify、snap、select、pointermove、click、dblclick、singleclick、postrender
(8)提供页面基本控制的示例:zoom控制、extent控制、feature适配、添加网格线、拖拽放大,拖拽旋转等
(9)提供测量相关的代码示例:测量面积、测量距离、显示当前zoom、显示某点经纬度等。
(10)提供综合应用相关代码:切换地图、聚合数据、列表图层双向交互显示、显示楼层信息、右键菜单、GPS定位、卷帘效果等。

http://www.lryc.cn/news/92398.html

相关文章:

  • 独立按键检测短按、长按,松手后响应操作
  • BurpSuite2023测试越权漏洞
  • 申请国家标准项目管理专业人员能力评级(CSPM)报名条件有哪些?
  • 代码随想录算法训练营第五十二天|300.最长递增子序列|674. 最长连续递增序列|718. 最长重复子数组
  • 完全卸载mysql教程
  • 4G开发板-安卓手机开发套件-MTK主板开发板定制
  • 人工智能十大新星揭晓,华人学者占90%
  • ROS学习——通信机制(话题通信①—发布方实现)
  • 【运筹优化】最短路算法之SPFA算法 + Java代码实现
  • linuxOPS基础_linux权限管理
  • linux安装homeassistant(智能设备远程控制开源框架)
  • TensorRT Triton Inference Server: 版本 error魔术标记不匹配 , NGC使用
  • Elasticsearch 文本分析器(下)
  • Git操作方法
  • CorelDRAW矢量绘图2023中文版下载
  • Java-API简析_java.lang.Float类(基于 Latest JDK)(浅析源码)
  • pycharm的基本使用
  • 为什么要使用微软的 Application Framework?
  • Python爬虫基础知识点
  • K8s运维备忘
  • 激光雷达+rtk+rgb联合使用(4)
  • 【K8S系列】快速初始化⼀个最⼩集群
  • Exploit/CVE-2010-0738
  • Go单元测试及框架使用
  • TreeMap类型实体类数据进行排序
  • HOOPS助力AVEVA数字化转型:支持多种3D模型格式转换!
  • (转载)基于遗传模拟退火的聚类算法(matlab实现)
  • 【C++】struct 和 class 的区别
  • 活动笔记丨物业行业人效提升与灵活用工新路径
  • 学习笔记:吴恩达ChatGPT提示工程