【vue2】实现微信截图(复制图片)在项目内可粘贴

需求

后台管理在上传图片地方需要将复制的图片粘贴上传


一、添加事件

在原有上传组件的基础上添加 paste事件

在这里插入图片描述

二、方法

 onPaste(e) {const items = (e.clipboardData || window.clipboardData).items;let blob = null;for (let i = 0; i < items.length; i++) {if (items[i].type.indexOf("image") === 0) {blob = items[i].getAsFile();}}if (blob !== null) {//粘贴的内容是图片  这里我调用了组件的上传图片的方法  blob就是粘贴的图片this.beforeUpload(blob,2);}},

后面就是上传组件的事件,这里就不详细写了,但是用粘贴的时候不会触发上传组件的上传方法,所以需要手动调用

三、实现

实现效果图:
在这里插入图片描述
paste事件必须选中添加事件的框才能触发,所以我这里加了先点击文字,文字在框里就可以触发事件


总结

这个粘贴图片的功能还可以用在别的地方,主要是用paste事件拿到图片,后面的操作都可以根据自己的需求实现

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

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

相关文章

034——从GUI->Client->Server->driver实现读写EEPROM

目录 1、修改GUI 2、修改client 3、 修改server 4、 修改driver_handele 5、 测试和提交 1、修改GUI 之前叫IIC&#xff0c;我们其实是借助EEPROM来测试IIC是不是好用所以名称改一改 长得有点奇怪 这样虽然一样长了但是还是很奇怪。 就先这样吧 layout_l [[tool.name(N…

100个实用电气知识

在当今社会&#xff0c;电力作为日常生活和工作中不可或缺的能源&#xff0c;扮演着越来越重要的角色。为了更好地利用电力资源&#xff0c;了解电气知识成为了越来越多人的需求。在电气领域&#xff0c;有很多实用的知识&#xff0c;这些知识对于从事电气工作的人来说是非常重…

二叉树oj题(2)

1.二叉树的最近公共祖先 解题思路&#xff1a;方法一&#xff1a; 1.先判断p或者q 是不是 root当中的一个 2.左子树当中递归査找p或者q 3.右子树当中递归查找p或者q 如何查找: root 的 left 和 right 都不为空 ->root root的 left 为空 right 不为空->right这一侧找…

出海不出局 | 小游戏引爆高线市场,新竞争态势下的应用出海攻略

出海小游戏&#xff0c;出息了&#xff01; 根据 Sensor Tower 近期发布的“2024 年 3 月中国手游收入 TOP30”榜单&#xff0c;出海小游戏在榜单中成了亮眼的存在。 其中&#xff0c;《菇勇者传说》3 月海外收入环比增长 63%&#xff0c;斩获出海手游收入增长冠军&#xff0c…

vue element-ui 表格横向滚动条在合计项下方

目前效果 需求效果 1.隐藏bodyWrapper滚动条&#xff0c;显示footerWrapper滚动条 css代码如下&#xff1a; div ::v-deep .el-table--scrollable-x .el-table__body-wrapper{overflow-x: hidden!important;z-index: 2!important;} div ::v-deep .el-table__footer-wrapper …

理发师问题的业务建模方案

背景 题目&#xff1a; 假设有一个理发店只有一个理发师&#xff0c;一张理发时坐的椅子&#xff0c;若干张普通椅子顾客供等候时坐。没有顾客时&#xff0c;理发师睡觉。顾客一到&#xff0c;叫醒理发师 。如果理发师没有睡觉&#xff0c;而在为别人理发&#xff0c;他就会坐…

Android—— log的记忆

一、关键log 1.Java的 backtrace(堆栈log) 上述是一个空指针异常&#xff0c;问题出现在sgtc.settings&#xff0c;所以属于客户UI问题。 2.WindowManager(管理屏幕上的窗口和视图层次结构) 3.ActivityManager(管理应用程序生命周期和任务栈) 4.wifi操作 (1) 连接wifi&#…

开源大模型Llama3,堪比GPT-4。手把手本地安装,纯小白可操作,不需要编程经验,国内可下载,可视化使用。

最近最劲爆科技动态&#xff0c;Meta开源Llama3模型&#xff0c;最强开源模型。 Llama3发布后&#xff0c;扎克伯格亲自给媒体表示“要超越所有人&#xff0c;做最领先AI”。 吴恩达等一众大佬表示祝贺。 在线体验地址&#xff1a;https://www.meta.ai/ 不过国内在线体验基本…

OpenWRT磁盘扩容(PVE虚拟机方案)

官方扩容指导文档 PVE给虚拟机磁盘扩容 给虚拟机磁盘扩容&#xff0c;选中OpenWRT的硬盘&#xff0c;随后选择调整大小 输入增量大小&#xff0c;即增加多少磁盘空间给硬盘。这里我选择增加4G 进入OpenWRT控制台界面安装一些linux常用查看磁盘的工具&#xff08;也可以通过网…

EasyPoi实现简单的Excel导出、导入

EasyPoi实现Excel导出、导入 下面这种方式不需要模板&#xff0c;更加方便但是不能进行复杂的导出 一、引入依赖 <dependency><groupId>cn.afterturn</groupId><artifactId>easypoi-base</artifactId><version>4.4.0</version><…

2024商业地产五一劳动节健康大会朋克养生市集活动策划方案

2024商业地产五一劳动节健康大会朋克养生市集&#xff08;带薪健康 快乐打工主题&#xff09;活动策划方案 活动策划信息&#xff1a; 方案页码&#xff1a;53页 文件格式&#xff1a;PPT 方案简介&#xff1a; 打工不养生 赚钱养医生 期待已久的五一假期&#xff0c; …

mysql download 2024

好久没在官网下载 mysql server 安装包。今天想下载发现&#xff1a; 我访问mysql官网的速度好慢啊。mysql server 的下载页面在哪里啊&#xff0c;一下两下找不到。 最后&#xff0c;慢慢悠悠终于找到了下载页面&#xff0c;如下&#xff1a; https://dev.mysql.com/downlo…

什么是全局特征,什么又是局部特征

全局特征和局部特征是用来描述数据中信息的两种不同方式&#xff0c;特别是在图像处理、模式识别和机器学习领域中经常被提到。它们有助于理解和分析数据的不同层面&#xff1a; 全局特征&#xff08;Global Features&#xff09; 全局特征描述了整个数据集的整体属性。在图像…

windows和linux服务器等保测评加固方法

服务器加固是通过各种方法增强服务器安全性的过程。保护操作系统免受黑客、破解者和攻击者的侵害。网络安全防护的目标是保密性、完整性、可用性、可控制性、不可否认性。 一、window服务器等保加固 以win2012和win2008 为例&#xff1a; &#xff08;win2008&#xff09; …

【UML建模】用例图

1 参与者 参与者的概念&#xff1a; 指系统以外的、需要使用系统或与系统交互的外部实体 可以分为&#xff1a;人、外部设备、外部系统 参与者的图形符号&#xff1a; 例 3.1 在一个银行业务系统中&#xff0c;可能会有以下参与者 客户 &#xff1a;在银行业务系统中办理…

React【Day2】

React表单控制 受控绑定 概念&#xff1a;使用React组件的状态&#xff08;useState&#xff09;控制表单的状态 双向绑定 MVVM 报错记录&#xff1a; 错误代码&#xff1a; import { useState } from "react";const App () > {const [value, setValue] useS…

TLV61048非同步升压BOOST转换器输入电压2.6-5.5V输出电流4A输出电压最高15V

推荐原因&#xff1a; 输入电压较低&#xff0c;输出电流可达3.5A SOT23-6封装 批量价格约0.70元 TLV61048引脚 TLV61048引脚功能 7 详细说明 7.1 概述 TLV61048是一款非同步升压转换器&#xff0c;支持高达 15 V 的输出电压和输入范围从 2.61 V 到 5.5 V。该TLV61048集成了…

LlamaIndex 加 Ollama 实现 Agent

AI Agent 是 AIGC 落地实现的场景之一&#xff0c;与 RAG 不同&#xff0c;RAG 是对数据的扩充&#xff0c;是模型可以学习到新数据或者本地私有数据。AI Agent 是自己推理&#xff0c;自己做&#xff0c;例如你对 AI Agent 说我要知道今天上海的天气怎么样&#xff0c;由于 AI…

serverLess

第一步 安装依赖 npm install serverless-devs/s g 第二步 配置秘钥&#xff1a; 第三步 执行终端 执行命令 s config add 选择 alibaba cloud &#xff08;alibaba&#xff09; 把对应的ID secret填写&#xff0c;第三个别名可以随便写&#xff1a; serverLess 查看是…

Kettle的安装及简单使用

Kettle的安装及简单使用 文章目录 Kettle的安装及简单使用一、kettle概述二、kettle安装部署和使用Windows下安装&#xff08; 1 &#xff09;概述 案例 1 &#xff1a;MySQL to MySQL主界面&#xff1a;**在kettle中新建转换--->输入--->表输入-->表输入双击**建立连…