使用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>
  1. HTML部分:使用 el-upload 组件创建一个拖拽上传区域。
  2. 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就实现到了这一步。这里有问题,那就是你看一下,点击上传后的图片是否会显示出来呢?

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

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

相关文章

uni-app小程序echarts中tooltip被遮盖

图表中的文案过长&#xff0c;tooltip溢出容器&#xff0c;会被遮盖住 解决方案&#xff1a; 在echarts的tooltip中有confine属性可将tooltip限制在容器内&#xff0c;不超过容器&#xff0c;就不易被遮盖

axios请求中的data和params的区别

一、 http&#xff1a;超文本传输协议&#xff0c;规定浏览器和服务器之间传输数据的格式 域名&#xff1a;标记访问服务器在互联网中的方位 资源路径&#xff1a;标记资源在服务器下的具体位置 url查询参数&#xff1a;浏览器提供给服务器的额外信息&#xff0c;让服务器返…

设计模式-七个基本原则之一-开闭原则 + SpringBoot案例

开闭原则:(SRP) 面向对象七个基本原则之一 对扩展开放&#xff1a;软件实体&#xff08;类、模块、函数等&#xff09;应该能够通过增加新功能来进行扩展。对修改关闭&#xff1a;一旦软件实体被开发完成&#xff0c;就不应该修改它的源代码。 要看实际场景&#xff0c;比如组内…

Scala的List

1.定义List的类型方式为List[ T ],T表示为数据类型。 2.List是一个不可变的集合&#xff0c;想要获取可变的序列就需要ListBuffer&#xff0c;通过-或方式添加或删除元素&#xff0c;还可以调用remove方法移除元素。 def main(args: Array[String]): Unit {//1.建立 可变列表…

[zotero]Ubuntu搭建WebDAV网盘

搭建Ubuntu Apache WebDAV网盘的综合步骤&#xff0c;使用666端口&#xff1a; 安装Apache和WebDAV模块&#xff1a; sudo apt update sudo apt install apache2 sudo a2enmod dav sudo a2enmod dav_fs创建WebDAV目录&#xff1a; sudo mkdir /var/www/webdav sudo chown www-d…

【深度学习】— 多输入多输出通道、多通道输入的卷积、多输出通道、1×1 卷积层、汇聚层、多通道汇聚层

【深度学习】— 多输入多输出通道、多通道输入的卷积、多输出通道、11 卷积层、汇聚层、多通道汇聚层 多输入多输出通道多通道输入的卷积示例&#xff1a;多通道的二维互相关运算 多输出通道实现多通道输出的互相关运算 11 卷积层11 卷积的作用 使用全连接层实现 11 卷积小结 …

如何解读多年连续发布的指数?

解读多年连续发布的指数是投资者和分析师理解市场趋势、预测未来走向的重要手段。以下是一些关键步骤和方法&#xff0c;有助于系统地解读多年连续发布的指数&#xff1a; 一、收集历史数据 来源&#xff1a;从财经网站、证券交易所官方网站或专业的金融数据服务提供商处获取…

Spring——入门

概述 Spring是什么 Spring是一款主流的Java EE轻量级开源框架&#xff0c;其目的适用于简化Java企业级应用开发难度和开发周期。Spring用途不仅限于服务器端的开发&#xff0c;从简单性、可测试性和松耦合的角度而言&#xff0c;任何Java应用都可以从Spring中受益。Spring框架…

计算机毕业设计Python+Neo4j中华古诗词可视化 古诗词智能问答系统 古诗词数据分析 古诗词情感分析 PyTorch Tensorflow LSTM

温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 作者简介&#xff1a;Java领…

vue+exceljs前端下载、导出xlsx文件

首先安装插件 npm install exceljs file-saver第一种 简单导出 //页面引入 import ExcelJS from exceljs; import {saveAs} from file-saver; export default {methods: { /** 导出操作 */async handleExportFun() {let that this// 获取当前年月日 用户下载xlsx的文件名称设…

潮玩宇宙方块兽系统开发:可定制UI与多种游戏内嵌助力个性化体验

潮玩宇宙方块兽系统开发正在推动潮玩与游戏的融合&#xff0c;通过个性化的UI设计和多游戏内嵌模式&#xff0c;为用户带来了独一无二的体验。本文将从可定制UI、多游戏内嵌功能以及系统实现等方面入手&#xff0c;探讨如何构建一个极具吸引力的潮玩宇宙方块兽系统。 一、可定制…

【Windows修改Docker Desktop(WSL2)内存分配大小】

记录一下遇到使用Docker Desktop占用内存居高不下的问题 自从使用了Docker Desktop&#xff0c;电脑基本每天都需要重启&#xff0c;内存完全不够用&#xff0c;从16g扩展到24&#xff0c;然后到40G&#xff0c;还是不够用&#xff1b;打开Docker Desktop 运行时间一长&#x…

HTTP 和 HTTPS 的区别 - 2024最新版前端秋招面试短期突击面试题【100道】

HTTP 和 HTTPS 的区别 - 2024最新版前端秋招面试短期突击面试题【100道】 &#x1f310; 在现代网络通信中&#xff0c;HTTP&#xff08;超文本传输协议&#xff09;和 HTTPS&#xff08;安全超文本传输协议&#xff09;是两种非常重要的协议。理解它们之间的区别和各自的特点…

无人机之姿态融合算法篇

无人机的姿态融合算法是无人机飞行控制中的核心技术之一&#xff0c;它通过将来自不同传感器的数据进行融合&#xff0c;以实现更加精确、可靠的姿态检测。 一、传感器选择与数据预处理 无人机姿态融合算法通常依赖于多种传感器&#xff0c;包括加速度计、陀螺仪、磁力计等。这…

pta 树

L2-006 树的遍历 - 团体程序设计天梯赛-练习集 #include <bits/stdc.h> #define int long long #define x first #define y second using namespace std; const int N35; pair<int,int> tree[N]; int post[N],in[N]; int n; int build(int la,int lb,int ra,int r…

Transformer 中的残差连接:为什么在正则化前加入残差?

7. Residual Connection Transformer 中的残差连接&#xff1a;为什么在正则化前加入残差&#xff1f; Transformer 中的编码器块&#xff08;EncoderBlock&#xff09;设计了一项重要的结构&#xff1a;残差连接&#xff08;Residual Connection&#xff09;&#xff0c;即在…

大语言模型LLMs在医学领域的最新进展总结

我是娜姐 迪娜学姐 &#xff0c;一个SCI医学期刊编辑&#xff0c;探索用AI工具提效论文写作和发表。 相比其他学科&#xff0c;医学AI&#xff0c;是发表学术成果最多的领域。 医学数据的多样性和复杂性&#xff08;包括文本、图像、基因组数据等&#xff09;&#xff0c;使得…

15分钟学 Go 第 43 天:前端与Go的结合

第43天&#xff1a;前端与Go的结合 目标&#xff1a;了解Go如何与前端交互&#xff0c;前端使用Vue.js 在现代Web开发中&#xff0c;Go语言常用于后端开发&#xff0c;而Vue.js是一个流行的前端框架&#xff0c;用于构建用户界面。结合二者&#xff0c;可以构建高效、可维护的…

项目:使用LNMP搭建私有云存储

一、准备工作 恢复快照&#xff0c;关闭安全软件 systemctl status firewalld //检查防火墙是否关闭getenforce //查看SElinux的执行状态which nmcli //检查虚拟机网络状态 二、搭建LNMP环境 yum -y nstall nginx mariadb-server php* //搭建环境三、上传软件 …

初学者指南:用例图——开启您的软件工程之旅

目录 背景&#xff1a; 基本组成&#xff1a; 关联&#xff08;Assciation&#xff09;&#xff1a; 包含&#xff08;Include&#xff09;&#xff1a; 扩展&#xff08;Extend&#xff09;&#xff1a; 泛化&#xff08;Inheritance&#xff09;&#xff1a; 完整银行…