【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://xiahunao.cn/news/2981455.html

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

PS入门|用PS设计物品尺寸,需要注意的几个重要问题

注&#xff1a;仅学习使用 【PS24】2024版本更新的内容比较多&#xff0c;对电脑配置的要求也是比较高的。建议配置&#xff1a;第十代i5或以上CPU。 如果是第十代i3或以下的CPU&#xff0c;建议安装PS2021或者以下版本。 ---这是一条不正经的分割线--- 讲了那么久的PS教程…

Matlab 对nc文件进行处理

1.介绍nc文件 NetCDF全称为network Common Data Format&#xff0c;中文译法为“网络通用数据格式”&#xff1b;netcdf文件开始的目的是用于存储气象科学中的数据&#xff0c;现在已经成为许多数据采集软件的生成文件的格式。 •从数学上来说&#xff0c;netcdf存储的数据就是…

springboot停机关闭前保证处理完请求

application.yml配置 server:shutdown: graceful // 处理完请求在关闭服务server:shutdown: immediate // 立刻关闭&#xff0c;默认 jvm关闭自带的回调

fakak详解(2)

Kafka和Flume整合 Kafka与flume整合流程 Kafka整合flume流程图 flume主要是做日志数据(离线或实时)地采集。 图-21 数据处理 图-21显示的是flume采集完毕数据之后&#xff0c;进行的离线处理和实时处理两条业务线&#xff0c;现在再来学习flume和kafka的整合处理。 配置fl…

Python基础学习之去除换行符

strip() 方法 strip() 方法用于去除字符串开头和结尾的空白字符&#xff0c;包括换行符&#xff08;\n&#xff09;、制表符&#xff08;\t&#xff09;和空格等。如果您想从字符串数据中去掉换行符&#xff0c;无论是单独存在的还是与其他空白字符一起&#xff0c;strip() 方…

【LAMMPS学习】八、基础知识(4.3)TIP3P水模型

8. 基础知识 此部分描述了如何使用 LAMMPS 为用户和开发人员执行各种任务。术语表页面还列出了 MD 术语&#xff0c;以及相应 LAMMPS 手册页的链接。 LAMMPS 源代码分发的 examples 目录中包含的示例输入脚本以及示例脚本页面上突出显示的示例输入脚本还展示了如何设置和运行各…

李沐57_长短期记忆网络LSTM——自学笔记

LSTM 1.忘记门&#xff1a;将值朝着0减少 2.输入门&#xff1a;决定不是忽略掉输入数据 3.输出门&#xff1a;决定是不是使用隐状态 !pip install --upgrade d2l0.17.5 #d2l需要更新首先加载时光机器数据集。 import torch from torch import nn from d2l import torch a…

「React Native」为什么要选择 React Native 作为的跨端方案

文章目录 前言一、常见因素二、举个栗子2.1 项目背景2.2 为什么选择 React Native2.3 项目实施2.4 成果总结 前言 没有完美的跨端技术&#xff0c;只有适合的场景。脱离适用场景去谈跨端技术没有什么意义。 一、常见因素 共享代码库&#xff1a; React Native 允许开发者编写…

LeetCode78:子集

题目描述 给你一个整数数组 nums &#xff0c;数组中的元素 互不相同 。返回该数组所有可能的 子集 &#xff08;幂集&#xff09;。 解集 不能 包含重复的子集。你可以按 任意顺序 返回解集。 代码 class Solution { public:vector<vector<int>> res;vector<…

团队如何异地共享文件?

在当今全球化的办公环境中&#xff0c;团队成员往往分散在不同的地理位置上。为了更好地协同工作&#xff0c;团队之间需要快速、安全地共享文件。本文将介绍一种名为“团队异地共享文件”的解决方案&#xff0c;它能够帮助团队成员在不同地点方便地共享文件&#xff0c;提高工…

代码随想录第四天打卡笔记

链表part2 1&#xff09;两两交换链表中的节点 这道题按照三步走方式&#xff1a; &#xff08;1&#xff09;第一步&#xff0c;设置cur指针指向这两个元素的第一个&#xff08;这里一定要注意保存原结点&#xff01;&#xff09;&#xff0c;断开cur与第一个节点的链接&…

echarts实现云台控制按钮效果,方向按钮

效果图 代码 option {color: [#bfbfbf],tooltip: {show: false},series: [{name: ,type: pie,radius: [40%, 70%],avoidLabelOverlap: true,itemStyle: {// borderRadius: 10,borderColor: #fff,borderWidth: 2},label: {show: true,position: inside,fontSize: 36,color: #f…

CISAW应急服务:网络安全应急响应之路——从经验到认证的体会

随着信息技术的飞速发展&#xff0c;网络安全问题日益凸显。作为一名网络安全从业人员&#xff0c;我深知每一次安全事件给组织甚至国家带来的巨大损失和潜在影响。在多年的实际工作中&#xff0c;我积累了一些网络安全应急服务经验&#xff0c;并参加了信息安全保障人员认证&a…

火绒安全的应用介绍

火绒安全软件是一款集成了杀毒、防御和管控功能的安全软件&#xff0c;旨在为用户提供全面的计算机安全保障。以下是火绒安全软件的一些详细介绍&#xff1a; 系统兼容性强&#xff1a;该软件支持多种操作系统&#xff0c;包括Windows 11、Windows 10、Windows 8、Windows 7、…

深度学习| Attention U-Net(包含Attention Gate代码)

前言&#xff1a;最近在阅读一篇文章&#xff0c;用到了Attention Unet所以特地写了两篇文章&#xff0c;上一篇文章介绍了Attention的基础知识&#xff0c;这篇文化在哪个介绍Attention Unet相关知识以及代码。 Attention U-Net 基础注意力机制软注意力和硬注意力U-Net为什么…

【蓝牙协议栈】【BLE】低功耗蓝牙工作流程(角色\广播\扫描\连接等专业名词介绍)

1. 精讲蓝牙协议栈&#xff08;Bluetooth Stack&#xff09;&#xff1a;SPP/A2DP/AVRCP/HFP/PBAP/IAP2/HID/MAP/OPP/PAN/GATTC/GATTS/HOGP等协议理论 2. 欢迎大家关注和订阅&#xff0c;【精讲蓝牙协议栈】和【Android Bluetooth Stack】专栏会持续更新中.....敬请期待&#x…

✯✯✯宁波ISO45001认证:保障员工健康与安全✯✯✯

&#x1f308;&#x1f308;&#x1f308;最近&#xff0c;我们公司&#x1f970;通过了ISO 45001认证&#xff0c;&#x1f920;这让我感到非常&#x1f60e;兴奋和自豪&#xff01;&#x1f939;作为一个在&#x1f3d9;️宁波工作的员工&#xff0c;&#x1f913;我深深地感…

Golang | Leetcode Golang题解之第48题旋转图像

题目&#xff1a; 题解&#xff1a; func rotate(matrix [][]int) {n : len(matrix)// 水平翻转for i : 0; i < n/2; i {matrix[i], matrix[n-1-i] matrix[n-1-i], matrix[i]}// 主对角线翻转for i : 0; i < n; i {for j : 0; j < i; j {matrix[i][j], matrix[j][i]…

动力学重构/微分方程参数拟合 - 基于模型

这一篇文章&#xff0c;主要是给非线性动力学&#xff0c;对微分方程模型参数拟合感兴趣的朋友写的。笼统的来说&#xff0c;这与混沌系统的预测有关&#xff1b;传统的机器学习的模式识别虽然也会谈论预测结果&#xff0c;但他们一般不会涉及连续的预测。这里我们考虑的是&…

解决双击PDF文件出现打印的问题【Adobe DC】

问题描述 电脑安装Adobe Acrobat DC之后&#xff0c;双击PDF文件就会出现打印&#xff0c;而无法直接打开。 右键PDF文件就会发现&#xff0c;第一栏出现的不是用Adobe打开&#xff0c;而是打印。 重装软件多次仍然无法解决。 原因 右键菜单被改写了。双击其实是执行右键菜…