element el-upload 粘贴上传图片

对form中的某一个el-form-item添加 @paste.native 事件,事件绑定方法名 handlePaste也可以在其他控件中添加事件监听,这里在当前form-item 这个块使用了,只有当你点击目标区域时才有效。

<el-form-item label="备注图片" @paste.native="handlePaste"><div style="color: red;">可粘贴上传</div><div class="imgs"><div class="i" v-for="(item, index) in addFormData.imgs" :key="index"><img :src="item" alt=""><i class="el-icon-error" @click="addFormData.imgs.splice(index, 1)"></i></div><el-upload class="avatar-uploader" :action="uploadAction" :show-file-list="false"multiple ref="upload" :headers="uploadHeaders" :on-success="handleUploadSuccess"><i class="el-icon-plus avatar-uploader-icon"></i></el-upload></div></el-form-item>

通过ref来调用自身的方法比如 handlerStart,handlerSuccess这些都是el-upload身上的方法,这里的ref为 upload。

handlePaste(e) {let now = new Date().getTime()if (now - this.timeStep < 500) {this.$message.warning('粘贴速度太频繁!请稍后再试');return}this.timeStep = nowvar clipboardData = e.clipboardData; // IEif (!clipboardData) {//chromeclipboardData = e.originalEvent.clipboardData;}var items = '';items = (e.clipboardData || window.clipboardData).items;let file = null;if (!items || items.length === 0) {this.$message.error('当前浏览器不支持粘贴本地图片,请打开图片复制后再粘贴!');return;}// 搜索剪切板itemsfor (let i = 0; i < items.length; i++) {// 限制上传文件类型if (items[i].type.indexOf('image') !== -1) {file = items[i].getAsFile();break;}}//判断是否超出上传数量// if (this.addFormData.imgs.length >= this.limit) {// 	this.$message.error(`上传文件数量不能超过 ${this.limit} 个!`); // 图片数量超出// 	return// }if (file) {this.$refs.upload.handleStart(file); // 将粘贴过来的图片加入预上传队列this.$refs.upload.submit(); // 提交图片上传队列}else{this.$message.error("粘贴内容非图片");}},//图片上传成功handleUploadSuccess(response, file, fileList) {this.addFormData.imgs.push(response.url)},

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://xiahunao.cn/news/3226634.html

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

相关文章

仕考网:事业单位b类考试考什么?

事业单位B类考试科目为《职业能力倾向测验(B类)》和《综合应用能力(B类)》两项&#xff0c;旨在全面评估应试者在多个领域的基本素质和专业能力。涵盖历史、自然科学、时事政治以及法律等关键方面&#xff0c;以确保选拔出的人员能够适应事业单位社会科学专技类岗位的需求。考试…

MQTT是什么,物联网

写文思路&#xff1a; 以下从几个方面介绍MQTT&#xff0c;包括&#xff1a;MQTT是什么&#xff0c;MQTT和webSocket的结合&#xff0c;以及使用场景&#xff0c; 一、MQTT是什么 MQTT&#xff08;Message Queuing Telemetry Transport&#xff09;是一种轻量级的发布/订阅消息…

Linux上安装JDK 1.8:详细步骤与环境配置

感谢您阅读本文&#xff0c;欢迎“一键三连”。作者定会不负众望&#xff0c;按时按量创作出更优质的内容。 ❤️ 1. 毕业设计专栏&#xff0c;毕业季咱们不慌&#xff0c;上千款毕业设计等你来选。 安装 JDK 1.8 在 Linux 上的步骤&#xff1a; 1.下载 JDK 1.8 JDK 1.8 可以…

阿一课代表今日分享之使用dnscat2 进行dns隧道反弹shell(直连模式linux对linux)

DNS介绍 DNS是域名系统(Domain Name System)的缩写&#xff0c;是因特网的一项核心服务&#xff0c;它作为可以将域名和IP地址相互映射的一个分布式数据库&#xff0c;能够使人更方便的访问互联网&#xff0c;而不用去记住能够被机器直接读取的IP数串。 DNS的记录类型有很多&a…

组件设计原则和度量方法

在日常开发过程中&#xff0c;Spring、Dubbo、Mybatis等都是我们常用的开源框架。当你在使用这些框架时&#xff0c;不可避免需要通过分析源码来理解内部的实现原理。那么&#xff0c;你在翻阅源代码时&#xff0c;有没有想过这些框架的代码结构为什么要这样进行设计和实现呢&a…

桥联亲和素-标记生物素法(BRAB)

桥联亲和素-标记生物素法&#xff08;BRAB&#xff09;是一种基于生物素与亲和素&#xff08;或链霉亲和素&#xff09;之间高亲和力特性的生物医学检测方法。以下是关于BRAB法的详细解释&#xff1a; 一、定义与原理 BRAB法&#xff0c;也称为桥联亲和素-标记生物素法&#xf…

游戏AI的创造思路-技术基础-情感计算(1)

游戏中的AI也是可以和你打情感牌的哦&#xff0c;不要以为NPC是没有感情的&#xff0c;不过&#xff0c;不要和NPC打过多的情感牌&#xff0c;你会深陷其中无法自拔的~~~~~~ 目录 1. 情感计算算法定义 2. 发展历史 3. 公式和函数 3.1. 特征提取阶段 TF-IDF&#xff08;词频…

如何监控 PostgreSQL 中表空间的使用情况并进行合理的管理?

文章目录 如何监控 PostgreSQL 中表空间的使用情况并进行合理的管理 一、引言 在 PostgreSQL 数据库中&#xff0c;表空间&#xff08;Tablespace&#xff09;是用于管理数据库对象存储位置的逻辑存储区域。有效地监控和管理表空间的使用情况对于确保数据库的性能、优化存储资…

为什么NAND Flash需要进行坏块管理而NOR Flash不需要呢?

NOR Flash和NAND Flash是两种不同类型的闪存技术&#xff0c;它们在存储单元的连接方式、耐用性、坏块管理等方面存在差异。 NOR Flash的存储单元是并联的&#xff0c;每个存储单元的字线和源线分别相连&#xff0c;这使得NOR Flash在读取速度上具有优势&#xff0c;适合用于执…

深度学习和NLP中的注意力和记忆

深度学习和NLP中的注意力和记忆 文章目录 一、说明二、注意力解决了什么问题&#xff1f;#三、关注的代价#四、机器翻译之外的关注#五、注意力&#xff08;模糊&#xff09;记忆&#xff1f;# 一、说明 深度学习的最新趋势是注意力机制。在一次采访中&#xff0c;现任 OpenAI 研…

玩鸣潮提示错误代码126:加载x3daudio1_7.dll失败无法打开的多个详细有效解决方法分享

玩游戏期间你是否也有遇到过找不到x3daudio1_7.dll无法继续执行代码打不开游戏&#xff1f;那么遇到这个问题要怎么办&#xff1f;有什么方法能解决&#xff1f;今天详细给大家介绍一下如何解决找不到x3daudio1_7.dll文件或x3daudio1_7.dll丢失的多个不同方法&#xff01; 第一…

淘宝扭蛋机小程序:互联网下的潮玩新增速

近些年&#xff0c;潮玩成为了年轻一代的新宠&#xff0c;吸引了无数的年轻消费者&#xff0c;尤其是扭蛋机行业&#xff01;扭蛋机具有价格低、商品丰富等特点&#xff0c;性价比非常高&#xff0c;受众群体遍布到了各个年龄层。扭蛋机商品具有非常高的观赏性和收藏性&#xf…

centos在GitHub上下载代码

1、安装git yum install -y git2、下载 git clone https://github.com/dji-sdk/Payload-SDK3、若遇到 centos 7 git clone 报错&#xff1a;fatal: unable to access解决方法&#xff1a; 3.1、 打开/etc/hosts文件&#xff1b;命令&#xff1a;sudo vim /etc/hosts 3.2、 添…

赋能数字安全新未来 | 湖南省“网安工匠”工业信息安全技能提升培训班圆满结束!

湖南省“网安工匠”工业信息安全技能提升培训班于7月9日在湖南邮电职业技术学院落下帷幕&#xff0c;该培训班由湖南省工业和信息化厅、湖南省通信管理局联合主办&#xff0c;湖南邮电职业技术学院、湖南会览网安教育服务有限公司承办&#xff0c;旨在深化工业信息安全技能&…

《Unpaired Unsupervised CT Metal ArtifactReduction》代码讲解

论文讲解见上篇博客 这篇论文的标题是《Unpaired Unsupervised CT Metal Artifact Reduction》&#xff0c;作者是Bo-Yuan Chen和Chu-Song Chen。这篇论文主要研究了如何使用深度学习技术来减少医学成像中由于金属植入物引起的CT图像伪影。 项目给出了几个不同的unet网…

美国商超入驻Homedepot,会成为传统家织厂家跨境赛道吗?

近年来&#xff0c;随着全球化步伐的加快和电子商务的蓬勃发展&#xff0c;越来越多的企业开始寻求跨境拓展的机会。在这样的背景下&#xff0c;美国知名的家居用品零售商超——Homedepot成为了许多国内外家织厂家关注的焦点。那么&#xff0c;美国商超入驻Homedepot究竟如何呢…

ArcGis将同一图层的多个面要素合并为一个面要素

这里写自定义目录标题 1.加载面要素的shp数据 2.点击菜单栏的地理处理–融合&#xff0c;如下所示&#xff1a; 3.将shp面要素输入&#xff0c;并设置输出&#xff0c;点击确定即可合并。合并后的属性表就只有一个数据了。

神经网络构成、优化、常用函数+激活函数

Iris分类 数据集介绍&#xff0c;共有数据150组&#xff0c;每组包括长宽等4个输入特征&#xff0c;同时给出输入特征对应的Iris类别&#xff0c;分别用0&#xff0c;1&#xff0c;2表示。 从sklearn包datasets读入数据集。 from sklearn import darasets from pandas impor…

Python 视频的色彩转换

这篇教学会介绍使用OpenCV 的cvtcolor() 方法&#xff0c;将视频的色彩模型从RGB 转换为灰阶、HLS、HSV...等。 因为程式中的OpenCV 会需要使用镜头或GPU&#xff0c;所以请使用本机环境( 参考&#xff1a;使用Python 虚拟环境) 或使用Anaconda Jupyter 进行实作( 参考&#x…

【数据结构】--- 堆

​ 个人主页&#xff1a;星纭-CSDN博客 系列文章专栏 :数据结构 踏上取经路&#xff0c;比抵达灵山更重要&#xff01;一起努力一起进步&#xff01; 目录 一.堆的介绍 二.堆的实现 1.向下调整算法 2.堆的创建 3.堆的实现 4.堆的初始化和销毁 5.堆的插入 5.1扩容…