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

news2024/11/23 21:40:22

在使用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.coloradmin.cn/o/628359.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

轻巧舒适的挂耳式耳机,更轻更好听,塞那Z30S Pro Max上手

入耳式的蓝牙耳机戴久了&#xff0c;总感觉很不舒服&#xff0c;现在市面上又有了很多设计新颖的耳机类型&#xff0c;像是我上周新换的这款sanag塞那Z30S Pro Max&#xff0c;就是一种不入耳的开放式耳机&#xff0c;做得还十分轻巧&#xff0c;带来了更加舒适的佩戴体验&…

调试记录-USB异常断开调试

问题描述 平台&#xff1a;rk3228 android7.1 问题&#xff1a;板子上有一个USB 4G模块&#xff0c;模块不是用标准的USB接口&#xff0c;而是M2接口。接着4G模组开机是可以正常工作的&#xff0c;但是只要点开任意一个app&#xff0c;就会出现设备断开&#xff0c;之后再重新…

怎么登录远程轻量云服务器?

​  轻量云服务器是一种基于云计算技术的服务器&#xff0c;具有价格低廉、配置灵活、易于管理等优点。但是&#xff0c;由于轻量云服务器通常是在云端运行&#xff0c;需要通过远程连接才能进行管理和操作。那么&#xff0c;怎么登录远程轻量云服务器呢? 要远程连接轻量云服…

Linux--ServerProgramming--(7)IPC

1.管道 2.信号量 2.1 概念 信号量 是一个计数器&#xff0c;用于实现进程间互斥和同步。 信号量的取值可以是任何自然数。 最简单的信号量是只能取 0 和 1 的变量&#xff0c;这也是信号量最常见的一种形式&#xff0c;叫做二进制信号量&#xff08;Binary Semaphore&#…

Docker Cgroups资源控制操作

资源控制 Docker 通过 Cgroup 来控制容器使用的资源配额&#xff0c;包括 CPU、内存、磁盘三大方面&#xff0c; 基本覆盖了常见的资源配额和使用量控制。 Cgroup 是 ControlGroups 的缩写&#xff0c;是 Linux 内核提供的一种可以限制、记录、隔离进程组所使用的物理资源(如…

vm安装,虚拟环境搭建win+linux+mac,及本机连接虚拟环境数据库、windows服务器搭建、内网穿透

教程中的软件、镜像、工具可去阿里云盘提取&#xff1a; 阿里云盘&#xff1a;https://www.aliyundrive.com/s/CLdTjFtnYbr 提取码&#xff1a;s1a8 一、安装虚拟机 下载链接&#xff1a;https://www.vmware.com/products/workstation-pro.html 下载的过程中可能需要注册登录…

经典的设计模式5——建造者模式

文章目录 建造者模式 建造者模式 截止到今天&#xff0c;创建者模式这一类别的模式已经全整理完了&#xff0c;一共包含5个&#xff0c;工厂方法模式&#xff0c;抽象工厂模式&#xff0c;单例模式&#xff0c;原型模式和建造者模式。还是太看的太慢&#xff0c;得加快进度了。…

黑客零基础入门方法有哪些?如何自学黑客技术?

大家经常问我一个问题&#xff0c;黑客零基础入门方法有哪些&#xff1f;以及如何自学黑客技术&#xff1f;首先要说的是世界上大部分的网络黑客都是自学成才的&#xff0c;这与黑客这门技术有很大的原因&#xff0c;黑客是一个靠兴趣驱动的技术&#xff0c;大部分成为黑客的人…

字节面试归来,黑暗3小时......

背景 杭州某中厂的软件测试开发&#xff0c;本科毕业5年&#xff0c;最近面试了PDD、小红书、字节等多个大厂。几乎都拿到了Offer&#xff0c;最终选择了字节2-2。以下是他的一些分享和总结。 从准备看机会开始&#xff0c;一直到拿到offer&#xff0c;经历了2个月的时间&…

探索未来,畅享奇迹——3DVR智慧景区引领旅游革命

导语&#xff1a; 在快速发展的科技时代&#xff0c;我们正逐渐进入一个全新的旅游体验时代。3DVR智慧景区作为旅游业的革命性创新&#xff0c;为游客带来了前所未有的沉浸式体验&#xff0c;同时也为景区管理者带来了无限的营销机遇。 通过穿戴VR设备&#xff0c;游客能够在虚…

vue项目中el-tree 添加右键菜单的方法

vue项目中&#xff0c;如何在el-tree 中显示右键菜单呢&#xff1f;这里的核心用到了 node-contextmenu“rightClick” &#xff0c;具体的操作方法如下&#xff1a; 核心分析 node-contextmenu是el-tree一重要的属性&#xff0c; 当某一节点被鼠标右键点击时会触发该事件。共…

Sui Builder House日本京都站开启报名

下一站Sui Builder House将于6月29-30日在日本京都举行&#xff0c;为世界各地的开发者提供身临其境地学习和交流的机会。 春日的樱花已经绽放&#xff0c;黄金周也已经过去&#xff0c;现在是时候来京都参加Sui Builder House一起庆祝夏天的来临了。来自日本和周边地区的开发…

Java 常量池:静态常量池 动态常量池 字符串池

Java 常量池相关内容 Java 常量池概念分类&#xff1a;静态常量池、动态常量池、字符串常量池&#xff08;由于jdk1.7之后字符串常量池从运行时常量池分离到堆中&#xff09; 静态常量池 class 文件中CLass文件中除了有类的版本、字段、方法、接口等描述信息外&#xff0c;还有…

【C++】C++的类型转换

文章目录 1、C语言中的类型转换2、为什么C需要四种类型转换3、C强制类型转换&#xff08;重点&#xff09;3-1、static_cast3-2、reinterpret_cast3-3、const_cast3-4、dynamic_cast 4、RTTI&#xff08;了解&#xff09;5、常见面试题6、总结 1、C语言中的类型转换 在C语言中&…

选择合适的数据库引擎:InnoDB vs. MyISAM - 你的终极指南!

大家好&#xff0c;我是小米&#xff0c;一个热衷于技术分享的29岁程序员。今天&#xff0c;我将带大家一起探讨一下MySQL中两种常见的存储引擎&#xff1a;InnoDB和MyISAM。它们之间有许多差异&#xff0c;了解这些差异对于我们在选择合适的存储引擎时至关重要。废话不多说&am…

想做好接口测试,先把这些概念搞清楚了

接口一般来说有两种&#xff0c;一种是程序内部的接口&#xff0c;一种是系统对外的接口。 系统对外的接口 比如你要从别的网站或服务器上获取资源或信息&#xff0c;别人肯定不会把数据库共享给你&#xff0c;他只能给你提供一个他们写好的方法来获取数据&#xff0c;你引用…

Springboot配置Log4j日志系统,并将日志存入数据库

Log4j是apache公司开发的一款日志管理系统&#xff0c;可以高效的管理系统中出现的BUG或者各种信息&#xff0c;并且可以已文本的方式或者数据库存入的方式来记录数据 第一步&#xff1a;导入依赖 在pom.xml中导入Log4j依赖 <!-- https://mvnrepository.com/artifact/log…

通达信通道交易系统选股公式,结合MACD绿柱缩短底背离

亚历山大埃尔德在《以交易为生》&#xff08;原书第2版&#xff09;中&#xff0c;将价格在通道中的波动比喻为河流在河谷中流动。当河流碰到右岸时&#xff0c;会向左转&#xff1b;碰到左岸时&#xff0c;会向右转。价格上涨时&#xff0c;常在碰到隐形天花板时停止上涨&…

java SSM 啤酒配送管理系统myeclipse开发mysql数据库springMVC模式java编程计算机网页设计

一、源码特点 java SSM 啤酒配送管理系统是一套完善的web设计系统&#xff08;系统采用SSM框架进行设计开发&#xff0c;springspringMVCmybatis&#xff09;&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代 码和数据库&#xff0c;系统主要采…

【每天学习一点新知识】应急响应快速指南

一、前言 马上就端午节啦&#xff0c;提前祝大家端午快乐&#xff0c;顺便把之前的六一也给补上&#xff0c;希望大家每天的生活都跟童话世界一样美好&#xff0c;充满希望&#xff08;虽然现实很残酷&#xff09;。 最近更的没有以前勤快了&#xff0c;一是在实习&#xff0c;…