element el-upload 粘贴上传图片

news2024/9/22 15:41:31

对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 = now
			var clipboardData = e.clipboardData; // IE
			if (!clipboardData) {
				//chrome
				clipboardData = e.originalEvent.clipboardData;
			}
			var items = '';
			items = (e.clipboardData || window.clipboardData).items;
			let file = null;
			if (!items || items.length === 0) {
				this.$message.error('当前浏览器不支持粘贴本地图片,请打开图片复制后再粘贴!');
				return;
			}
			// 搜索剪切板items
			for (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://www.coloradmin.cn/o/1915892.html

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

相关文章

skywalking-2-客户端-php的安装与使用

skywalking的客户端支持php&#xff0c;真的很棒。 官方安装文档&#xff1a;https://skywalking.apache.org/docs/skywalking-php/next/en/setup/service-agent/php-agent/readme/ 前置准备 本次使用的php版本是8.2.13: php -v PHP 8.2.13 (cli) (built: Nov 21 2023 09:5…

Prometheus+Grafana主机运行数据

目录 介绍 安装Node Exporter 配置Prometheus 验证配置 导入仪表盘 介绍 Prometheus是一款开源的监控和警报工具&#xff0c;而Node Exporter是Prometheus的一个官方插件&#xff0c;用于采集主机上的各种系统和硬件指标。 安装Node Exporter 下载最新版本的Node Export…

科普文:浮点数精度运算BigDecimal踩坑和填坑

概叙 用过Java的BigDecimal类型&#xff0c;但是很多人都用错了。如果使用不当&#xff0c;可能会造成非常致命的线上问题&#xff0c;因为这涉及到金额等数据的计算精度。 首先说一下&#xff0c;一般对于不需要特别高精度的计算&#xff0c;我们使用double或float类型就可以了…

PHP实现用户认证与权限管理的全面指南

目录 引言 1. 数据库设计 1.1 用户表&#xff08;users&#xff09; 1.2 角色表&#xff08;roles&#xff09; 1.3 权限表&#xff08;permissions&#xff09; 1.4 用户角色关联表&#xff08;user_roles&#xff09; 1.5 角色权限关联表&#xff08;role_permissions…

MySQL之基本查询(下)-表的增删查改

表的增删查改&#xff1a;CRUD : Create(创建), Retrieve(读取)&#xff0c;Update(更新)&#xff0c;Delete&#xff08;删除&#xff09; Update(更新) 语法&#xff1a; UPDATE table_name SET column expr [, column expr ...] [WHERE ...] [ORDER BY ...] [LIMIT ...] …

【观成科技】Websocket协议代理隧道加密流量分析与检测

Websocket协议代理隧道加密流量简介 攻防场景下&#xff0c;Websocket协议常被用于代理隧道的搭建&#xff0c;攻击者企图通过Websocket协议来绕过网络限制&#xff0c;搭建一个低延迟、双向实时数据传输的隧道。当前&#xff0c;主流的支持Websocket通信代理的工具有&#xf…

AnimateLCM:高效生成连贯真实的视频

视频扩散模型因其能够生成连贯且高保真的视频而日益受到关注。然而&#xff0c;迭代去噪过程使得这类模型计算密集且耗时&#xff0c;限制了其应用范围。香港中文大学 MMLab、Avolution AI、上海人工智能实验室和商汤科技公司的研究团队提出了AnimateLCM&#xff0c;这是一种允…

盲盒抽卡机小程序:抽卡机的多样化发展

近几年&#xff0c;盲盒卡牌出现在了大众的生活中&#xff0c;深受学生和年轻消费者的喜爱。卡牌是一种新的盲盒模式&#xff0c;玩家购买后随机获得卡牌&#xff0c;为了收集一整套卡牌&#xff0c;玩家会进行各种复购行为&#xff0c;卡牌逐渐成为了年轻人追捧的休闲方式&…

获取天气数据

获取天气数据其实是一个简单的HTTP接口&#xff0c;根据用户输入的adcode&#xff0c;查询目标区域当前/未来的天气数据&#xff0c;数据来源是中国气象局。 第一步&#xff0c;申请”web服务 API”密钥&#xff08;Key&#xff09;&#xff1b; 链接: 首页 | 高德控制台 (am…

HTTP协议分析/burp/goby/xray

一、HTTP简介 HTTP(超文本传输协议)是今天所有web应用程序使用的通信协议。最初&#xff0c;HTTP只是一个为获取基于文本的静态资源而开发的简单协议&#xff0c;后来人们以名种形式扩展和利用它.使其能够支持如今常见的复杂分布式应用程序。HTTP使用一种用于消息的模型:客户端…

软件产品必须进行确认测试吗?包括哪些测试流程和注意事项?

在当前科技快速发展的时代&#xff0c;软件产品已经成为人们生活和工作中不可或缺的一部分。然而&#xff0c;随着软件产品的增多和复杂性的提升&#xff0c;软件质量的问题也逐渐浮现出来。为了确保软件产品的质量和稳定性&#xff0c;软件产品在开发完成后必须进行确认测试。…

模版初阶(更新)

文章目录 模版介绍函数模版模版匹配规则类模版结言 模版介绍 函数模版分为两个类型&#xff1a; 函数模版类模版 函数模版 语法格式&#xff1a; t e m p l a t e < t y p n a m e T 1 , t y p n a m e T 2... > template<typname T1,typname T2...> template&…

小技巧(更新中)

1.Pycharm使用小技巧pycharm的使用小技巧1---快速找到模块内的函数和类&#xff0c;快速定位查看的模块所在位置_pycharm怎么查找某个函数-CSDN博客 2. Python库之requirments Python库安装之requirements.txt, environment.yml_python requirements-CSDN博客 3.执行.sh脚本的…

N6 word2vec文本分类

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊# 前言 前言 上周学习了训练word2vec模型&#xff0c;这周进行相关实战 1. 导入所需库和设备配置 import torch import torch.nn as nn import torchvision …

10x Visium HD数据分析

–https://satijalab.org/seurat/articles/visiumhd_analysis_vignette 留意更多内容&#xff0c;欢迎关注微信公众号&#xff1a;组学之心 1.数据准备-Seurat Visium HD 数据是由特定空间排列分布的寡核苷酸序列在 2um x 2um 的网格&#xff08;bin&#xff09;中生成的。然…

15. Revit API: Transaction(事务)与 Failures(故障处理)

前言 UI讲完&#xff0c;回到DB这块儿。在Document那篇&#xff0c;提到增删改查操作都是在Document上&#xff0c;是对Documet进行操作。 看到“增删改查”这四个&#xff0c;想到什么了没有&#xff1f; 数据库&#xff08;DB&#xff09;嘛~话说那本经典的红皮数据库的书叫…

Python学习笔记34:进阶篇(二十三)pygame的使用之颜色与字体

前言 基础模块的知识通过这么长时间的学习已经有所了解&#xff0c;更加深入的话需要通过完成各种项目&#xff0c;在这个过程中逐渐学习&#xff0c;成长。 我们的下一步目标是完成python crash course中的外星人入侵项目&#xff0c;这是一个2D游戏项目。在这之前&#xff…

算法训练营day28--134. 加油站 +135. 分发糖果+860.柠檬水找零+406.根据身高重建队列

一、 134. 加油站 题目链接&#xff1a;https://leetcode.cn/problems/gas-station/ 文章讲解&#xff1a;https://programmercarl.com/0134.%E5%8A%A0%E6%B2%B9%E7%AB%99.html 视频讲解&#xff1a;https://www.bilibili.com/video/BV1jA411r7WX 1.1 初见思路 得模拟分析出…

【Python实战因果推断】19_线性回归的不合理效果9

目录 De-Meaning and Fixed Effects Omitted Variable Bias: Confounding Through the Lens of Regression De-Meaning and Fixed Effects 您刚刚看到了如何在模型中加入虚拟变量来解释不同组间的不同干预分配。但是&#xff0c;FWL 定理真正的亮点在于虚拟变量。如果您有大量…

鸿蒙架构之AOP

零、主要内容 AOP 简介ArkTs AOP 实现原理 JS 原型链AOP实现原理 AOP的应用场景 统计类&#xff1a; 方法调用次数统计、方法时长统计防御式编程&#xff1a;参数校验代理模式实现 AOP的注意事项 一、AOP简介 对于Android、Java Web 开发者来说&#xff0c; AOP编程思想并不…