使用Element UI实现一个拖拽图片上传,并可以Ctrl + V获取图片实现文件上传
要在 Element UI 的拖拽上传组件中实现 Ctrl + V 图片上传功能,可以通过监听键盘事件来捕获粘贴操作,并将粘贴的图片数据上传到服务器。
版本V1,实现获取粘贴板中的文件
注意,本案例需要再你已经安装了Element UI并在项目中正确配置的情况下进行,第一个版本仅适合上传jpeg和png的图片
创建拖拽上传组件
假设你已经有一个基本的拖拽上传组件,我们可以在此基础上添加 Ctrl + V 功能。
监听粘贴事件
我们需要在页面中监听 paste 事件,当用户按下 Ctrl + V 时,捕获粘贴板中的图片数据。
处理粘贴事件
在捕获到图片数据后,将其转换为 File 对象,并调用上传方法。
代码如下:
<template><div><el-uploaddragaction="https://jsonplaceholder.typicode.com/posts/":on-preview="handlePreview":on-remove="handleRemove":before-upload="beforeUpload"multipleref="upload"><i class="el-icon-upload"></i><div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div><div class="el-upload__tip" slot="tip">只能上传jpg/png文件,且不超过500kb</div></el-upload></div>
</template>
<script>
import { Upload } from 'element-ui';export default {name: 'DragUpload',methods: {handlePaste(event) {// 捕获粘贴事件const items = event.clipboardData.items;for (let i = 0; i < items.length; i++) {if (items[i].type.indexOf('image') !== -1) {// 获取图片文件const file = items[i].getAsFile();this.handleFile(file);break;}}},handleFile(file) {// 将文件添加到上传队列this.$refs.upload.handleStart(file);this.$refs.upload.submit();},handlePreview(file) {console.log('Preview:', file);},handleRemove(file, fileList) {console.log('Remove:', file, fileList);},beforeUpload(file) {const isJPGorPNG = file.type === 'image/jpeg' || file.type === 'image/png';const isLt500K = file.size / 1024 < 500;if (!isJPGorPNG) {this.$message.error('只能上传 JPG/PNG 格式的图片!');}if (!isLt500K) {this.$message.error('图片大小不能超过 500KB!');}return isJPGorPNG && isLt500K;}},mounted() {// 监听粘贴事件document.addEventListener('paste', this.handlePaste);},beforeDestroy() {// 移除粘贴事件监听document.removeEventListener('paste', this.handlePaste);}
};
</script>
- HTML部分:使用 el-upload 组件创建一个拖拽上传区域。
- JavaScript部分:
- handlePaste 方法:捕获粘贴事件,检查粘贴板中的数据是否为图片文件,如果是,则调用 handleFile 方法。
- handleFile 方法:将图片文件添加到上传队列,并提交上传。
- mounted 生命周期钩子:添加粘贴事件监听器。
- beforeDestroy 生命周期钩子:移除粘贴事件监听器,防止内存泄漏。
随便截图一张,我们这个时候ctrl + v 就可以发现他可以获取我们粘贴板中的文件。
我们到这一步发现,图片网页是获取到。这个时候你在跟着你的业务,传递相关参数,这第V1版本就可以用了。
第二版本V2,可以直接在粘贴的过程在下面以压缩图片的形式展示图片
<template><div><el-uploaddrag:action="uploadFileUrl":on-preview="handlePreview":on-remove="handleRemove":before-upload="beforeUpload":on-success="handleSuccess"multipleref="upload":file-list="fileList"><i class="el-icon-upload"></i><div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div><div class="el-upload__tip" slot="tip">只能上传jpg/png文件,且不超过500kb</div></el-upload><!-- 显示上传后的文件 --><div v-for="(file, index) in fileList" :key="index" class="uploaded-file"><div v-if="isImage(file.name)"><img :src="file.url" alt="Uploaded Image" class="uploaded-image" /><el-button type="text" @click="removeFile(index)">移除</el-button></div><div v-else><span>{{ file.name }}</span><el-button type="text" @click="removeFile(index)">移除</el-button></div></div></div>
</template>
<script>
import { Upload } from 'element-ui';export default {name: 'DragUpload',data() {return {fileList: []};},methods: {handlePaste(event) {const items = event.clipboardData.items;for (let i = 0; i < items.length; i++) {if (items[i].type.indexOf('image') !== -1) {const file = items[i].getAsFile();this.handleFile(file);break;}}},handleFile(file) {const reader = new FileReader();reader.onload = (e) => {this.fileList.push({name: file.name,url: e.target.result});};reader.readAsDataURL(file);this.$refs.upload.handleStart(file);this.$refs.upload.submit();},handlePreview(file) {console.log('Preview:', file);},handleRemove(file, fileList) {this.fileList = fileList;},beforeUpload(file) {const isJPGorPNG = file.type === 'image/jpeg' || file.type === 'image/png';const isLt500K = file.size / 1024 < 500;if (!isJPGorPNG) {this.$message.error('只能上传 JPG/PNG 格式的图片!');}if (!isLt500K) {this.$message.error('图片大小不能超过 500KB!');}return isJPGorPNG && isLt500K;},handleSuccess(response, file, fileList) {// 更新 fileListthis.fileList = fileList.map(f => ({name: f.name,url: f.url || f.response.url // 假设服务器返回的响应中有 url 字段}));},removeFile(index) {this.fileList.splice(index, 1);},isImage(fileName) {return fileName.toLowerCase().endsWith('.jpg') || fileName.toLowerCase().endsWith('.png');}},mounted() {document.addEventListener('paste', this.handlePaste);},beforeDestroy() {document.removeEventListener('paste', this.handlePaste);}
};
</script>
<style scoped>
.uploaded-file {margin-top: 10px;display: flex;align-items: center;
}.uploaded-image {max-width: 100px;max-height: 100px;margin-right: 10px;
}
</style>
如图所示。Ctrl + V就实现到了这一步。这里有问题,那就是你看一下,点击上传后的图片是否会显示出来呢?
相关文章:
使用Element UI实现一个拖拽图片上传,并可以Ctrl + V获取图片实现文件上传
要在 Element UI 的拖拽上传组件中实现 Ctrl V 图片上传功能,可以通过监听键盘事件来捕获粘贴操作,并将粘贴的图片数据上传到服务器。 版本V1,实现获取粘贴板中的文件 注意,本案例需要再你已经安装了Element UI并在项目中正确配…...
私域流量圈层在新消费时代的机遇与挑战:兼论开源 AI 智能名片、2 + 1 链动模式、S2B2C 商城小程序的应用
摘要:本文剖析了私域流量圈层在新消费时代呈现出的独特温度与信任优势,阐述了从传统销售到新消费转型中用户心理的变化。同时,强调了内容对于私域流量的关键作用,并分析开源 AI 智能名片、2 1 链动模式、S2B2C 商城小程序在私域流…...
vxe-vxe-colgroup后端返回数据 对数据进行处理 动态合并分组表头(v-if控制表格渲染(数据请求完成后渲染))
1.html vxe-colgroup循环合并数据;v-if控制表格渲染(数据请求完成后渲染) <template><vxe-table v-if"isTableReady" :data"tableData"><vxe-colgroup title"基本信息"><template v-for…...
ESLint 使用教程(五):从输入 eslint 命令到最终代码被处理,ESLint 中间究竟做了什么工作
前言 ESLint 是现代 JavaScript 开发中不可或缺的代码质量工具。它能够帮助开发者找到并修复代码中的问题,提升代码的可维护性。但是,你可能会好奇:从我们在终端里输入 eslint 命令到最终代码被处理,ESLint 中间究竟做了什么工作…...
【安全测试】sqlmap工具(sql注入)学习
前言:sqimap是一个开源的渗透测试工具,它可以自动化检测和利用SQL注入缺陷以及接管数据库服务器的过程。它有一个强大的检测引擎,许多适合于终极渗透测试的小众特性和广泛的开关,从数据库指纹、从数据库获 取数据到访问底层文件系…...
YOLOv11融合CVPR[2023]空间和通道重建卷积ScConv模块及相关改进思路|YOLO改进最简教程
YOLOv11v10v8使用教程: YOLOv11入门到入土使用教程 YOLOv11改进汇总贴:YOLOv11及自研模型更新汇总 《SCConv: Spatial and Channel Reconstruction Convolution for Feature Redundancy》 一、 模块介绍 论文链接:SCConv: Spatial and Cha…...
C++研发笔记13——C语言程序设计初阶学习笔记11
从今天开始我们开始第三模块《分支语句和循环语句》的学习,在本模块中我们将会涉及到以下9个内容:什么是语句、分支语句——if语言、分支语句——switch语句、循环语句——while循环、循环语句——for循环、循环语句——do while循环、折半查找算法、猜数…...
html5拖放
1、什么是拖放(Drag 和 Drop) 拖放,字面意思就是拖动,放置 在编程里面也是如此,拖放是一种常见的特性,即抓取对象以后拖到另一个位置。 在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放。…...
卫导调零天线功率倒置算法原理及MATLAB仿真
卫导调零天线功率倒置算法原理及MATLAB仿真 文章目录 前言一、调零天线简介二、功率倒置自适应算法三、MATLAB仿真四、MATLAB代码总结 前言 \;\;\;\;\; 自适应调零抗干扰技术可以很大程度改善导航抗干扰性能,也是目前导航抗干扰技术中不可或缺的,其研究意…...
【划分型 DP】力扣139. 单词拆分
给你一个字符串 s 和一个字符串列表 wordDict 作为字典。如果可以利用字典中出现的一个或多个单词拼接出 s 则返回 true。 注意:不要求字典中出现的单词全部都使用,并且字典中的单词可以重复使用。 示例 1: 输入: s “leetcode”, wordDic…...
Python学习从0到1 day26 第三阶段 Spark ④ 数据输出
半山腰太挤了,你该去山顶看看 —— 24.11.10 一、输出为python对象 1.collect算子 功能: 将RDD各个分区内的数据,统一收集到Driver中,形成一个List对象 语法: rdd.collect() 返回值是一个list列表 示例: from …...
AWTK fscript 中的 JSON 扩展函数
fscript 是 AWTK 内置的脚本引擎,开发者可以在 UI XML 文件中直接嵌入 fscript 脚本,提高开发效率。本文介绍一下 fscript 中的 ** JSON 扩展函数 ** 1.json_load 加载 json 数据。 原型 json_load(str) > object json_load(binary) > object js…...
动态规划 —— dp 问题-买卖股票的最佳时机III
1. 买卖股票的最佳时机III 题目链接: 123. 买卖股票的最佳时机 III - 力扣(LeetCode)https://leetcode.cn/problems/best-time-to-buy-and-sell-stock-iii/description/ 2. 题目解析 3. 算法原理 状态表示:以某一个位置为结尾或者…...
“绽放艺术风采、激发强国力量” 海南省第十一届中小学生艺术展演活动圆满开展
2024年11月1日,由省教育厅主办、琼台师范学院承办的海南省第十一届中小学生艺术展演省级展演活动在海口正式拉开帷幕。来自全省各市县、省属学校等共计4000余名师生参加本届中小学生艺术展演现场展演活动。 本届展演活动以“绽放艺术风采、激发强国力量”为主题&…...
Linux之文件和目录类命令详解(2)
Linux之文件和目录类命令详解(2) 1、mv-移动文件或重命名2、find-查找文件和目录3、locate-快速查找文件4、du-显示目录或文件的磁盘使用情况5、df-显示文件系统的磁盘空间使用情况6、chmod-更改文件或目录的权限7、chown-更改文件或目录的拥有者8、tree…...
NVR管理平台EasyNVR多品牌NVR管理工具/设备摄像头开启ONVIF的方法
NVR小程序接入平台EasyNVR作为一款功能强大的安防视频监控平台,以其出色的兼容性和灵活性,在智慧校园、智慧工厂、智慧水利等多个场景中得到了广泛应用。本文将重点介绍如何为大华摄像头开启ONVIF协议,以便与EasyNVR进行无缝对接。 大华大部分…...
Pr 视频过渡:沉浸式视频
效果面板/视频过渡/沉浸式视频 Video Transitions/Immersive Video Adobe Premiere Pro 的视频过渡效果中,沉浸式视频 Immersive Video效果组主要用于 VR 视频剪辑之间的过渡。 自动 VR 属性 Auto VR Properties是所有 VR 视频过渡效果的通用选项。 默认勾选&#x…...
SwiftUI开发教程系列 - 第1章:简介与环境配置
1.1 SwiftUI简介 SwiftUI 是 Apple 于 2019 年推出的声明式用户界面框架,旨在简化 iOS、macOS、watchOS 和 tvOS 应用的 UI 开发。与 UIKit 的命令式编程方式不同,SwiftUI 提供了一种声明式语法,让开发者可以以更加直观、简洁的方式构建 UI。…...
gitlab ci/cd搭建及使用笔记
记录下使用gitlab的ci/cd的devops构建过程中,一些易忘点或者踩坑点: 官方文档中英文(建议英文) https://docs.gitlab.com/ee/ci/yaml/artifacts_reports.html https://gitlab.cn/docs/jh/ci/pipelines/schedules.html为什么创建了…...
Xcode 16 中 Swift Testing 的参数化(Parameterized)机制趣谈
概述 我们之前曾在 《用接地气的例子趣谈 WWDC 24 全新的 Swift Testing 入门》系列博文以及《WWDC24(Xcode 16)中全新的 Swift Testing 使用进阶》博文中较为系统地介绍了今年 WWDC 24 中全新的 Swift Testing 测试系统。 不过 Swift Testing 的本领远…...
Python自动化运维DevSecOps与安全自动化
Python自动化运维DevSecOps与安全自动化 目录 🛡️ DevSecOps概念与实践🔍 自动化安全扫描与漏洞修复🧰 基于Python的安全审计与合规性检查🐳 云平台与容器安全:基于Python的容器扫描工具⚠️ 自定义安全检测与漏洞修…...
2024下半年系统架构师考试【回忆版】
2024年11月10日,系统架构师考试如期举行,屡战屡败的参试倒是把北京的学校转了好几所。 本次考试时间 考试科目考试时间综合知识、案例分析8:30 - 12:30论文14:30 - 16:30 综合知识 1、1-1000以内包含5的数字个数 2、 案例分析 1、RESTful 对于前后…...
UE5.4 PCG 自定义PCG蓝图节点
ExecuteWithContext: PointLoopBody: 效果:点密度值与缩放成正比...
迁移学习相关基础
迁移学习 目标 将某个领域或任务上学习到的知识或模式应用到不同但相关的领域或问题中。 主要思想 从相关领域中迁移标注数据或者知识结构、完成或改进目标领域或任务的学习效果。 概述 Target data:和你的任务有直接关系的数据,但数据量少ÿ…...
华为云计算HCIE-Cloud Computing V3.0试验考试北京考场经验分享
北京试验考场 北京考场位置 1.试验考场地址 北京市海淀区北清路156号中关村环保科技示范园区M地块Q21楼 考试场选择北京,就是上面这个地址,在预约考试的时候会显示地址,另外在临近考试的时候也会给你发邮件,邮件内会提示你考试…...
数据分析——学习框架
✅作者简介:2022年博客新星 第八。热爱国学的Java后端开发者,修心和技术同步精进。 🍎个人主页:Java Fans的博客 🍊个人信条:不迁怒,不贰过。小知识,大智慧。 💞当前专栏…...
量化交易系统开发-实时行情自动化交易-3.4.2.Okex行情交易数据
19年创业做过一年的量化交易但没有成功,作为交易系统的开发人员积累了一些经验,最近想重新研究交易系统,一边整理一边写出来一些思考供大家参考,也希望跟做量化的朋友有更多的交流和合作。 接下来聊聊基于Okex交易所API获取行情数…...
pytorch实现深度神经网络DNN与卷积神经网络CNN
DNN概述 深度神经网络DNN来自人脑神经元工作的原理,通过在计算机中逻辑抽象出多个节点,接收处理并向后传递信息,实现计算机的自我学习,类比结构见下图: 该方法通过预测输出与实际值的差异不断调整节点参数࿰…...
芯片测试-LDO测试
LDO测试 💢LDO的简介💢💢压降💢💢决定压降的主要因素💢 💢LDO的分类及原理💢💢PMOS LDO💢💢PMOS LDO工作过程💢💢PMOS LDO…...
期权懂|期权新手看过来:看跌期权该如何交易?
期权小懂每日分享期权知识,帮助期权新手及时有效地掌握即市趋势与新资讯! 期权新手看过来:看跌期权该如何交易? 一、可以直接购买看跌期权: (1)选择预期下跌的标的资产。 (2&#…...
专业的盐城网站建设/随机关键词生成器
一、FAT32转NTFS 在“运行”中输入“CMD”打开“命令提示符”窗口,输入:“CONVERT F: /FS:NTFS”,其中“F:”是分区盘符(要跟冒号),“/FS:NTFS”是把指定分区转换为NTFS格式。 本来以为很快就可以搞定了&am…...
wordpress插件补丁/网络营销专业就业公司
mybatis级联查询懒加载配置 springboot整合mybatis懒加载 mybatis-plus配置 application.properties #配置mybatis级联查询懒加载 mybatis-plus.configuration.aggressive-lazy-loadingfalse mybatis-plus.configuration.lazy-loading-enabledtruemybaits配置 application…...
wordpress嵌入哔哩哔哩视频/关键词分析软件
1、开启慢sql日志 1.1 windows window的mysql配置,编辑C:\ProgramData\MySQL\MySQL Server 5.7\my.ini,添加如下 #是否开启慢查询日志,1表示开启,0表示关闭 slow_query_log 1 #慢查询日志存储路径 slow_query_log_file D:/my…...
抖音怎么推广/南京seo公司教程
在peewee模块中,如果已经配置好了mysql数据库的信息,而不想定义Model,可以直接使用execute_sql() 执行一条sql语句 如果我想执行多条呢?peewee模块没有找到类似execute_many()的方法 既然pymysql模块可以执行多条,而…...
长春建设集团网站/百度一下百度搜索网站
Code Review是一种通过复查代码提高代码质量的过程,在XP方法中占有极为重要的地位,也已经成为软件工程中一个不可缺少的环节。本文通过对Code Review的一些概念和经验的探讨,就如何进行Code Review和Code Review中应该注意什么提出一些建议。…...
郑州百度推广网站建设/如何设置淘宝友情链接
Hadoop - 简介 Hadoop可运行于一般的商用服务器上,具有高容错、高可靠性、高扩展性等特点 特别适合写一次,读多次的场景 适合 大规模数据流式数据(写一次,读多次)商用硬件(一般硬件) 不适合…...