vue3+element-push 实现input框粘贴图片或文本,图片上传。

vue3+element-push 实现input框粘贴图片或文本,图片上传。

<el-inputstyle="height: 100px; width: 100%"@paste.capture.prevent="pasting"v-model="textMsg"placeholder="请输入"/>// 展示上传的列表--可不要<divstyle="margin-bottom: 10px; line-height: 20px"v-show="filesList"v-for="(item, index) in filesList":key="index"><div class="zi"><img:src="item.filePath"class="record-img"v-if="item.fileType === 'png' ||item.fileType === 'jpg' ||item.fileType === 'jpeg' ||item.fileType === 'ico' ||item.fileType === 'bmp' ||item.fileType === 'gif'"/><imgsrc="/src/assets/imgs/fileImg/docx.png"class="record-img"v-else-if="item.fileType === 'doc' || item.fileType === 'docx'"/><imgsrc="/src/assets/imgs/fileImg/xlsx.png"class="record-img"v-else-if="item.fileType === 'xls' || item.fileType === 'xlsx'"/><imgsrc="/src/assets/imgs/fileImg/zip.png"class="record-img"v-else-if="item.fileType === 'zip'"/><imgsrc="/src/assets/imgs/fileImg/rar.png"class="record-img"v-else-if="item.fileType === 'rar'"/><imgsrc="/src/assets/imgs/fileImg/ppt.png"class="record-img"v-else-if="item.fileType === 'ppt' || item.fileType === 'pptx'"/><imgsrc="/src/assets/imgs/fileImg/pdf.png"class="record-img"v-else-if="item.fileType === 'pdf'"/><imgsrc="/src/assets/imgs/fileImg/txt.png"class="record-img"v-else-if="item.fileType === 'txt'"/><imgsrc="/src/assets/imgs/fileImg/html.png"class="record-img"v-else-if="item.fileType === 'html'"/><img src="/src/assets/imgs/fileImg/file.png" class="record-img" v-else /><div style="folat: left; margin-left: 40px"><el-link:href="item.filePath":underline="false"downloadtarget="_blank"type="primary">{{ item.fileName }}</el-link></div><el-iconstyle="position: absolute; right: 20px; top: 7px; color: red"size="16"@click="deleteFile(index)"><Delete/></el-icon></div></div> 
···
···
...
// js部分截图 /
const textMsg = ref('')
const pasting = async (event) => {let txt = event.clipboardData.getData('Text')if (typeof txt == 'string') {textMsg.value += txt}let cutFile = nullconst items = (event.clipboardData || window.clipboardData).itemsif (items.length) {for (let i = 0; i < items.length; i++) {if (items[i].type.indexOf('image') !== -1) {cutFile = items[i].getAsFile()message.success('截图上传中请稍等。。。')await FileApi.updateFile({ file: cutFile }).then((res) => {filesList.value.push({filePath: res.data,fileType: cutFile.name.split('.')[1],fileName: cutFile.name})})break}}}
}
···

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

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

相关文章

高效使用DeepSeek对“情境+ 对象 +问题“型课题进行开题!

目录 思路"情境 对象 问题"型 课题选题的类型有哪些呢&#xff1f;这要从课题题目的构成说起。通过对历年来国家社会科学基金立项项目进行分析&#xff0c;小编发现&#xff0c;课题选题类型非常丰富&#xff0c;但一般是围绕限定词、研究对象和研究问题进行不同的组…

cursor改Goland操作习惯

步骤1&#xff1a;设置主题 步骤2&#xff1a;安装最新go插件 步骤3&#xff1a;安装最新go版本 需要使用最新版本go1.24.1,设置玩环境变量&#xff0c;需要关闭cursor进程再打开 步骤4&#xff1a;安装go相关工具 Command Shift P安装完成后需要把go版本设置回自己项目合…

4.1.1 类的序列化与反序列化(XmlSerializer)

本文介绍XML序列化和反序列化操作 本例子中被序列化的类(Devices)中有一个List,其元素类型为&#xff1a;DigitalInputInfo. 序列化以及反序列化都很简单&#xff1a; 序列化&#xff1a;即把类的对象输出到文件中。 StreamWriter streamWriter new StreamWriter(filePath); …

OpenCV中的图像旋转方法详解

文章目录 引言1. 简单的旋转&#xff1a;cv2.rotate()2. 任意角度旋转&#xff1a;cv2.getRotationMatrix2D() cv2.warpAffine()结论 引言 在计算机视觉和图像处理领域&#xff0c;图像旋转是一项基础而重要的操作。OpenCV作为最流行的计算机视觉库之一&#xff0c;提供了多种…

C/C++ | 静态修饰符static

文章目录 概述一、定义介绍二、功能作用(一)static修饰全局变量(二)static修饰局部变量(三)static修饰成员变量(四)static修饰全局函数(五)static修饰成员函数三、代码实例(一)static初始化被多次调用概述 本节详细介绍了static修饰符的原理及用法。包括在变量、函数、类内等…

canvas画板!随意画!!

希望你天天开心 代码&#xff1a; <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>绘画板</title…

Elasticsearch 使用reindex进行数据同步或索引重构

1、批量复制优化 POST _reindex {"source": {"index": "source","size": 5000},"dest": {"index": "dest"} }2、提高scroll的并行度优化 POST _reindex?slices5&refresh {"source": {…

Debian 12.10 root 登录失败,两步解决!

大家好&#xff0c;这里是 DBA学习之路&#xff0c;专注于提升数据库运维效率。 前言 今天看到 debian 正式发布 12.10&#xff0c;安装完成后发现无法登录 root 用户&#xff1a; 这里我一开始怀疑是 root 密码错了&#xff0c;所以改了一下 root 密码&#xff0c;忘记 root …

systemctl 命令详解与常见问题解决

在 Linux 系统中&#xff0c;service 命令和 chkconfig 命令一直用于管理服务&#xff0c;但随着 systemd 的引入&#xff0c;systemctl 命令逐渐成为主流。systemctl 命令不仅功能强大&#xff0c;而且使用简单。本文将详细介绍 systemctl 命令的作用以及常见问题的解决方法。…

【爬虫】DrissionPage-获取douyim用户下的视频

之前看过DrissionPage&#xff0c;觉得很厉害&#xff0c;比selenium简单&#xff0c;适合新手。因为盲目跟风逆向&#xff0c;今天看了一个DrissionPage案例直播&#xff0c;学习一下&#xff0c;真香哈。 DrissionPage官网&#xff1a;&#x1f6f0;️ 概述 | DrissionPage官…

中国矿业大学iGMAS分析中心介绍

一、关于GNSS和iGMAS 在浩瀚的太空中&#xff0c;全球卫星导航系统&#xff08;GNSS&#xff09;构建起精准定位的时空基准。IGMAS——国际GNSS监测评估系统&#xff0c;是由中国倡导并主导建设的全球GNSS监测网络&#xff0c;旨在提供高精度、高可靠的导航、定位与授时服务。 …

清理HiNas(海纳斯) Docker日志并限制日志大小

我在一个机顶盒的HiNas系统上跑Octoprint的docker版本&#xff0c;每隔一段时间盒子空间就被占完了&#xff0c;运行df -h之后&#xff0c;显示/dev/root Use 100%。 Filesystem Size Used Avail Use% Mounted on /dev/root 6.6G 6.6G 0 100% / devtmpfs …

RK3588芯片NPU的使用:yolov8-pose例子图片检测在安卓系统部署与源码深度解析(rknn api)

一、本文的目标 将yolo8-pose例子适配安卓端,提供选择图片后进行姿态识别功能。通过项目学习源码和rknn api。二、开发环境说明 主机系统:Windows 11目标设备:搭载RK3588芯片的安卓开发板核心工具:Android Studio Koala | 2024.1.1 Patch 2,NDK 27.0三、适配(迁移)安卓 …

DeepSeek本地部署手册

版本:v1.0 适用对象:零基础开发者 一、部署前准备 1.1 硬件要求 组件最低配置推荐配置说明CPUIntel i5 8代Xeon Gold 6230需支持AVX指令集内存16GB64GB模型越大需求越高GPUNVIDIA GTX 1060 (6GB)RTX 3090 (24GB)需CUDA 11.7+存储50GB可用空间1TB NVMe SSD建议预留2倍模型大小…

HashMap的源码解析

HashMap基于哈希表的Map接口实现&#xff0c;是以key-value存储形式存在&#xff0c;即主要用来存放键值对。HashMap的实现不是同步的&#xff0c;这意味着它不是线程安全的。它的key、value都可以为null。此外&#xff0c;HashMap中的映射不是有序的。 JDK1.8 之前 HashMap由数…

论文精读:大规模MIMO波束选择问题的量子计算解决方案

论文精读&#xff1a;大规模MIMO波束选择问题的量子计算解决方案 概要&#xff1a; 随着大规模多输入多输出系统&#xff08;MIMO&#xff09;在5G及未来通信技术中的应用&#xff0c;波束选择问题&#xff08;MBS&#xff09;成为提升系统性能的关键。传统的波束选择方法面临计…

DPIN河内AI+DePIN峰会:共绘蓝图,加速构建去中心化AI基础设施新生态

近日&#xff0c;一场聚焦前沿科技融合的盛会——AIDePIN峰会在越南河内成功举办。此次峰会由DPIN、QPIN及42DAO等Web3领域的创新项目联合组织&#xff0c;汇聚了众多Web3行业领袖、技术专家与社区成员。峰会于2025年4月19日举行&#xff0c;其核心议题围绕去中心化物理基础设施…

品牌公关如何邀请媒体采访?|微信文案模版

传媒如春雨&#xff0c;润物细无声&#xff0c;大家好&#xff0c;我是51媒体胡老师。 &#x1f4f8;✨不论是举行活动、展会、发布会、推介会&#xff0c;还是新店开业&#x1f389; 都需要邀约媒体出席活动并采访报道&#x1f3a4;&#x1f4f0; 我们需要在活动前提醒媒体参…

影楼精修-手部青筋祛除算法解析

注意&#xff1a;本文样例图片为了避免侵权&#xff0c;均使用AIGC生成&#xff1b; 手部青筋祛除科普 手部青筋祛除是影楼精修中一个非常精细的工作&#xff0c;需要较高的修图技巧&#xff0c;目前市面上很少有自动化的青筋祛除功能的&#xff0c;而像素蛋糕目测是第一个做到…

智慧景区国标GB28181视频平台EasyGBS视频融合应用全场景解决方案

一、方案背景​ 随着旅游业的蓬勃发展&#xff0c;景区的规模不断扩大&#xff0c;游客数量持续增长&#xff0c;对景区的安全管理和游客服务质量提出了更高要求。打造一个高效、智能的视频监控及管理系统成为景区运营的关键。EasyGBS作为一款基于国标GB28181协议的视频云服务…