在Element Ui中支持从系统粘贴版中获取图片和PDF,Docx,Doc,PPT等文档

在上一篇中,我们单纯的实现了Ctrl + V实现从粘贴版中获取图片信息,但是点击上传的时候会有个bug,就是点击文件上传的时候,会出现一个bug,这篇,我们将在上一篇的基础上进行完善,并支持从粘贴版中获取文件内容,同时对上传文件的大小进行判断,且支持PDF,Docx,Doc,PPT等文件进行上传。

实现步骤

  1. 安装 Element UI
    确保你已经安装了 Element UI 并在项目中正确配置。

  2. 创建拖拽上传组件
    假设你已经有一个基本的拖拽上传组件,我们将在其基础上添加 Ctrl + V 功能。

  3. 监听粘贴事件
    我们需要在页面中监听 paste 事件,当用户按下 Ctrl + V 时,捕获粘贴板中的文件数据。

  4. 处理粘贴事件
    在捕获到文件数据后,将其转换为 File 对象,并调用上传方法。

实现代码

<template><div><el-uploaddragaction="https://jsonplaceholder.typicode.com/posts/":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">支持上传多种文件类型</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>

CSS

<style scoped>
.uploaded-file {margin-top: 10px;display: flex;align-items: center;
}.uploaded-image {max-width: 100px;max-height: 100px;margin-right: 10px;
}
</style>

JavaScript

<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++) {const allowedTypes = ['image/jpeg', 'image/png', 'application/pdf', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', // DOC, DOCX'application/vnd.ms-powerpoint', 'application/vnd.openxmlformats-officedocument.presentationml.presentation' // PPT, PPTX];if (allowedTypes.includes(items[i].type)) {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 allowedTypes = ['image/jpeg', 'image/png', 'application/pdf', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', // DOC, DOCX'application/vnd.ms-powerpoint', 'application/vnd.openxmlformats-officedocument.presentationml.presentation' // PPT, PPTX];const isAllowedType = allowedTypes.includes(file.type);const isLt500K = file.size / 1024 < 500;if (!isAllowedType) {this.$message.error('只能上传 JPG/PNG/PDF/DOC/DOCX/PPT/PPTX 格式的文件!');}if (!isLt500K) {this.$message.error('文件大小不能超过 500KB!');}return isAllowedType && 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>

说明

  1. HTML部分:
  • 使用 el-upload 组件创建一个拖拽上传区域。
  • 使用 v-for 循环遍历 fileList 数组,显示每个上传的文件。
  • 如果文件是图片,显示图片预览和移除按钮。
  • 如果文件不是图片,显示文件名和移除按钮。
  1. CSS部分
  • 添加了一些基本样式来美化上传后的文件显示。
  1. JavaScript部分
  • fileList 数据属性用于存储上传的文件列表。
  • handlePaste 方法:捕获粘贴事件,检查粘贴板中的数据是否为支持的文件类型(图片、PDF、DOC、DOCX、PPT、PPTX),如果是,则调用 handleFile 方法。
  • handleFile 方法:读取文件内容并将其添加到 fileList 中,同时触发上传。
  • handleRemove 方法:更新 fileList 以反映文件的移除。
  • beforeUpload 方法:检查文件类型和大小,确保只上传允许的文件类型。
  • handleSuccess 方法:处理文件上传成功后的响应,并更新 fileList。
  • removeFile 方法:从 fileList 中移除指定索引的文件。
  • isImage 方法:判断文件名是否为图片文件。

实现效果截图如下:

在这里插入图片描述

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

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

相关文章

《数据可视化技术》上机报告

一、实验目的及要求 掌握pyecharts数据可视化环境搭建以及pyecharts交互式基础图形的绘制。 &#xff08;1&#xff09;掌握pyecharts中初始配置项&#xff0c;系列配置项&#xff0c;全局配置项的配置方法。 &#xff08;2&#xff09;掌握pyecharts中条形图的绘制方法。 …

️虚拟机配置NAT和Bridge模式

虚拟机的网络配置 桥接 通过使用物理机网卡 具有单独ip NAT 把物理机为路由器进行上网 NAT模式&#xff1a; 所谓nat模式&#xff0c;就是虚拟系统会通过宿主机的网络来访问外网&#xff0c;而这里的宿主机相当于有两个网卡&#xff0c;一个是真实网卡&#xff0c;一个是虚拟…

2023年值得关注的9大零售趋势

图片来源&#xff1a;Photo by Heidi Fin on Unsplash 随着经济衰退的威胁日益迫近&#xff0c;新的一年带给零售商一系列挑战&#xff0c;而后者刚从一年的供应链瓶颈和库存过剩中恢复过来。当然&#xff0c;2023年并非一直悲观。随着越来越多的零售商找到新的机会&#xff0c…

杰控通过 OPCproxy 获取数据发送到服务器

把数据从 杰控 取出来发到服务器 前提你在杰控中已经有变量了&#xff08;wincc 也适用&#xff09; 打开你的opcproxy 软件包 opcvarFile 添加变量 写文件就写到 了 opcproxy.ini中 这个文件里就是会读取到的数据 然后 opcproxy.exe发送到桌面快捷方式再考回来 &#…

DVWA靶场通关——SQL Injection篇

一&#xff0c;Low难度下unionget字符串select注入 1&#xff0c;首先手工注入判断是否存在SQL注入漏洞&#xff0c;输入1 这是正常回显的结果&#xff0c;再键入1 You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for…

鸿蒙学习生态应用开发能力全景图-三方库(3)

鸿蒙生态三方库&#xff0c;是在鸿蒙系统上可重复使用的软件库&#xff0c;可帮助开发者重用技术资产&#xff0c;快速开发鸿蒙生态应用、元服务&#xff0c;提升开发效率。根据不同的开发语言分为两种&#xff1a;  ArkTS/TS/JS 语言的三方库&#xff0c;可直接导入并使用。…

OpenAI官方发布:利用ChatGPT提升写作的12条指南

近日&#xff0c;OpenAI官方发布了学生如何利用ChatGPT提升写作的12条指南&#xff0c;值得深入研究学习。 在如今AIGC应用爆发增长的时间点&#xff0c;如何充分利用生成式AI工具&#xff0c;如ChatGPT&#xff0c;有效切快速的提升写作和学习能力&#xff0c;成为每个学生、…

【数据库系列】Spring Data Neo4j Cypher 查询使用进阶指南

在 Neo4j 中&#xff0c;Cypher 查询语句并不像 MySQL 的 mapper XML 那样直接支持拆分和组织。然而&#xff0c;你可以使用一些策略来管理和重用 Cypher 查询&#xff0c;使其更易于维护和组织。以下是几种方法&#xff1a; 1. 使用 Spring Data Neo4j 的 Repository 接口 通…

.net core开发windows程序在国产麒麟操作系统中运行

.net core自从3.1版本号后&#xff0c;完全是一个独立的开源的多平台开发组件&#xff0c;目前国产化是趋势&#xff0c;不少项目需要开发国产如Kylin操作系统中运行的程序&#xff0c;无论是Web程序还是桌面程序&#xff0c;都有这样的需求。 首先&#xff0c;可明确的的.net…

基于 Python 的 Bilibili 评论分析与可视化

一、项目概述 本项目利用 Python 对 Bilibili &#xff08;哔哩哔哩&#xff09;平台上的视频评论数据进行爬取、清洗和分析&#xff0c;并通过可视化展示数据的主要特征。我们通过以下几个步骤实现了这一过程&#xff1a; 数据爬取&#xff1a;使用 Bilibili 提供的 API 获取…

如何禁用VMware虚拟网卡

安装VMWare虚拟机之后&#xff0c;会在本地创建两个虚拟网卡VMware Network Adapter VMnet1和VMware Network Adapter VMnet8&#xff0c;如果使用iNode客户端联网时会进行禁用多网卡检测&#xff0c;否则无法联网。因此&#xff0c;问题根源就在于虚拟网卡未禁用。 1、网络和…

ElasticSearch备考 -- Cross cluster replication(CCR)

一、题目 操作在cluster1&#xff08;local&#xff09;中操作索引task&#xff0c;复制到cluster2&#xff08;remote&#xff09;中 二、思考 CCR 我们可以对标MySQL 理解为为主从&#xff0c;后者备份。主节点负责写入数据&#xff0c;从/备节点负责同步时主节点的数据。 …

界面控件DevExpress WPF中文教程:TreeList视图及创建分配视图

DevExpress WPF拥有120个控件和库&#xff0c;将帮助您交付满足甚至超出企业需求的高性能业务应用程序。通过DevExpress WPF能创建有着强大互动功能的XAML基础应用程序&#xff0c;这些应用程序专注于当代客户的需求和构建未来新一代支持触摸的解决方案。 无论是Office办公软件…

基于Java的药店管理系统

药店管理系统 一&#xff1a;基本介绍开发环境管理员功能模块图系统功能部分数据库表设计 二&#xff1a;部分系统页面展示登录界面管理员管理进货信息界面管理员管理药品信息界面管理员管理员工界面管理员管理供应商信息界面管理员管理销售信息界面员工对信息进行管理员工对销…

Qwen2-VL:发票数据提取、视频聊天和使用 PDF 的多模态 RAG 的实践指南

概述 随着人工智能技术的迅猛发展&#xff0c;多模态模型在各类应用场景中展现出强大的潜力和广泛的适用性。Qwen2-VL 作为最新一代的多模态大模型&#xff0c;融合了视觉与语言处理能力&#xff0c;旨在提升复杂任务的执行效率和准确性。本指南聚焦于 Qwen2-VL 在三个关键领域…

探索Python的HTTP利器:Requests库的神秘面纱

文章目录 **探索Python的HTTP利器&#xff1a;Requests库的神秘面纱**一、背景&#xff1a;为何选择Requests库&#xff1f;二、Requests库是什么&#xff1f;三、如何安装Requests库&#xff1f;四、Requests库的五个简单函数使用方法1. GET请求2. POST请求3. PUT请求4. DELET…

信号保存和信号处理

目录 信号保存中重要的概念 内核中信号的保存 对sigset_t操作的函数 对block&#xff0c;pendding&#xff0c;handler三张表的操作 sigpromask ​编辑 sigpending 是否有sighandler函数呢&#xff1f; 案例 信号处理 操作系统是如何运行的&#xff1f; 硬件中断 …

基于HTTP编写ping操作

基于HTTP编写ping操作 前言 在上一集我们就完成了创建MockServer的任务&#xff0c;那么我们就可以正式开始进行网络的通讯&#xff0c;那么我们今天就来基于HTTP来做一个客户端ping服务端的请求&#xff0c;服务端返回pong的响应。 需求分析 基于HTTP&#xff0c;实现ping…

机器学习 贝叶斯公式

这是条件概率的计算公式 &#x1d443;(&#x1d434;|&#x1d435;)&#x1d443;(B|A)&#x1d443;(&#x1d434;)/&#x1d443;(&#x1d435;) 全概率公式 &#x1d443;(&#x1d435;)&#x1d443;(&#x1d435;|&#x1d434;)&#x1d443;(&#x1d434;)&am…

【工具插件类教学】在 Unity 中使用 iTextSharp 实现 PDF 文件生成与导出

目录 一、准备工作 1. 安装 iTextSharp 2. 准备资源文件 二、创建 ExportPDFTool 脚本 1、初始化 PDF 文件,设置字体 2、添加标题、内容、表格和图片 三、使用工具类生成 PDF 四、源码地址 在 Unity 项目中,我们有时会需要生成带有文本、表格和图片的 PDF 文件,以便…