vue,element。监听快捷键粘贴图片,添加到el-upload的列表。

news2024/11/17 17:25:09

在①中,粘贴图片,图片能够自动添加到底下el-upload组件的文件列表②。




// 对应①
<el-card>
	<el-tooltip content="粘贴图片至此" placement="top">
		<input readonly class="pasteImg" @paste.prevent="handleImagePaste" placeholder="粘贴图片">
    </el-tooltip>
</el-card>
// el-upload组件
<el-upload drag class="upload-advice" :action="'#'" :auto-upload="false" :limit="10" :on-change="handleBeforeUpload" :before-upload="handleBeforeUpload" :on-error="handleUploadError" :show-file-list="true" ref="upload">
    <i class="el-icon-upload"></i>
    <div class="el-upload__text">将图片拖到此处,或<em>点击上传</em></div>
    <!-- 上传提示 -->
    <div class="el-upload__tip" slot="tip">
        请上传
        <template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b></template>
        <template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b> </template>
        的图片
    </div>
</el-upload>
.pasteImg {
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    color: #606266;
    padding: 0 5px;
    transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
    width: 100%;
    border-color: #c0c4cc;
    height: 36px;
    line-height: 36px;
    text-align: center;
}
<script>
export default {
    data() {
        return {
            fileSize: 5,
            fileType: ["jpg", "png"],
        }
    },
    methods: {
        // 粘贴图片
        handleImagePaste(event) {
            // console.log("event", event);
            // console.log("event.clipboardData", event.clipboardData);
            const files = event.clipboardData.files[0];
            if (!files) {
                this.$message.warning("请复制图片再粘贴!");
                return;
            }
            // console.log("files", files);
            let timeStamp = new Date().getTime();
            // console.log("时间戳", timeStamp);
            // 通过ref获取el-upload中的列表,往里面push粘贴的图片,uid是时间戳,需要自己获取
            files.uid = timeStamp;
            this.$refs.upload.uploadFiles.push({
                name: files.name,
                percentage: 0,
                raw: files,
                size: files.size,
                status: "ready",
                uid: files.uid,
            });
        },
    }
}
</script>

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

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

相关文章

GitHub Actions自动化部署+定时百度链接推送

前言 最近用VuePress搭建了一个静态网站&#xff0c;由于是纯静态的东西&#xff0c;每次修改完文章都要重新打包上传很是麻烦。虽然vuepress-theme-vdoing主题作者提供了GitHub Actions自动化部署的教程文章&#xff0c;但是过于简陋且是19年发布的。。 1. 创建一个GitHub仓…

从 1 杯咖啡到 1 首歌的时间,炎凰数据如何实现 Pipeline 执行提速 6 倍?

目录 痛点&#xff1a;工具链复杂、功能少、网不好&#xff0c;太 EMO&#xff01; 解法&#xff1a;All in one&#xff0c;一个平台串联需求→开发→发布 代码、CI/CD 一站式服务 需求、Story、Bug 一站式管理 关联代码 案例&#xff1a;3 个具体使用场景见真章 1. 灵…

MYSQL完全卸载、安装与账号创建、权限控制

一、卸载mysql CentOS 卸载 MySQL 1. 查看安装情况 使用以下命令查看当前安装mysql情况&#xff0c;查找以前是否装有mysql rpm -qa|grep -i mysql这里显示我安装的 MySQL 服务有有&#xff1a; 2. 停止 mysql 服务、删除之前安装的 mysql 删除命令&#xff1a;rpm -e –n…

聚焦纺织行业断线检测,AI机器视觉助力小场景的大未来

随着人工智能技术的发展&#xff0c;机器视觉以其快速、准确、高效的信息采集和处理优势&#xff0c;逐渐成为制造企业现代化升级不可缺少的技术之一&#xff0c;持续赋能相关传统劳动密集型产业的自动化与智能化转型。 传统劳动密集型产业对于人工依赖程度高&#xff0c;供应…

【IDEA报错:Cause: java.sql.SQLSyntaxErrorException: ORA-00942: 表或视图不存在】

报错内容如下&#xff1a; 2023-08-17 11:17:16.274 ERROR [egrant-biz,e44d96001eb5f212,e44d96001eb5f212,true] 29700 --- [ XNIO-1 task-2] c.i.c.l.c.RestExceptionController : 服务器异常org.springframework.jdbc.BadSqlGrammarException: ### Error queryin…

【计组】校验码(奇偶校验码、海明校验码、CRC)

前言 1、小提示&#xff1a;本篇博文是参考王道&#xff0c;在复习 ASCII 码的基础上&#xff0c;总结校验码的相关学习知识点&#xff0c;并在最后搭配习题&#xff08;含408真题&#xff09;进行巩固练习。&#xff08;对重点内容进行划线、标色&#xff09; 2、适用人群&…

前端笔试+面试分享

以下是个人线下面试遇到的真实的题&#xff0c;仅供参考和学习 1. css 选择符有哪些&#xff1f;哪些属性可以继承&#xff1f;优先级算法加何计算&#xff1f; CSS选择符有很多种&#xff0c;例如类型选择器、类选择器、ID选择器、属性选择器、伪类选择器、伪元素选择器等。 …

linux tomcat server.xml 项目访问路径变更不生效

如果想改成默认的127.0.0.1:8080 访问项目 先确定更改的作用文件 server.xml 的 host:appBase 标签 默认找到appBase webapps 下的war包&#xff0c;并解压&#xff0c;解压后的appname为访问路径 也就变成了 127.0.0.1:8080/appname host:Context:path 标签 appBase的 优先…

深度学习技巧应用25-深度学习在的常见问题与使用技巧,让大家更容易理解深度学习,通过面试

大家好&#xff0c;我是微学AI&#xff0c;今天给大家介绍一下深度学习技巧应用25-深度学习在的常见问题与使用技巧&#xff0c;让大家更容易理解深度学习。在面对AI领域公司面试的过程中&#xff0c;往往面试官会针对AI领域或者算法实践进行提问&#xff0c;这些问题可能大家知…

laravel-admin之 解决上传图片不显示 $form->image(‘image‘); 及 $grid->column(‘image‘);

参考 https://blog.csdn.net/u013164285/article/details/106017464 $grid->column(‘image’)->image(‘http://wuyan.cn’, 100, 100); // //设置服务器和宽高 图片上传的域名 上传的图片不显示 在 这里设置了图片的上传路径 在这里设置 域名 就可以回显图片

如何用思维导图+Markdown提升工作效率?

在日常的工作中&#xff0c;我们常常需要记录一些信息、重要的事情或者一些重要的想法&#xff0c;Markdown就是一种非常好用的记录工具。搭配思维导图可以提高我们的记录效率&#xff0c;让我们的记录更加结构化。 为什么使用思维导图&#xff1f; 思维导图可以帮助我们整理…

你敢信?代码小白30min就能搭建一套酷炫级的驾驶舱!

大量研究结果表明&#xff0c;人类通过图像获取信息的速度比通过阅读文字获取信息的速度要快很多。 近几年&#xff0c;数据可视化在企业中越发“流行”&#xff0c;将数字以可视化的形式展示&#xff0c;不仅清晰明了地展现企业真正的实力&#xff0c;也能让管理者快速了解细节…

问道管理:股票打板风险大吗?怎么降低打板风险?

在股票市场上&#xff0c;一些出资者喜爱低吸&#xff0c;一些喜爱打板&#xff0c;那么&#xff0c;股票打板危险大吗&#xff1f;怎么下降打板危险&#xff1f;下面问道管理为大家准备了相关内容&#xff0c;以供参阅。 股票打板通常是指在个股涨停时买入&#xff0c;这种买入…

ssm社区管理与服务系统源码和论文

ssm社区管理与服务的设计与实现031 开发工具&#xff1a;idea 数据库mysql5.7 数据库链接工具&#xff1a;navcat,小海豚等 技术&#xff1a;ssm 研究背景 当今时代是飞速发展的信息时代。在各行各业中离不开信息处理&#xff0c;这正是计算机被广泛应用于信息管理系统的…

【C++】一文带你初识C++继承

食用指南&#xff1a;本文在有C基础的情况下食用更佳 &#x1f340;本文前置知识&#xff1a; C类 ♈️今日夜电波&#xff1a;napori—Vaundy 1:21 ━━━━━━️&#x1f49f;──────── 3:23 …

【学习笔记之java】使用RestTemplate调用第三方接口

1.首先需要导入依赖 <!-- RestTemplate使用导入的依赖--><dependency><groupId>org.apache.httpcomponents</groupId><artifactId>httpclient</artifactId><version>4.5.13</version></dependency>2.跟启动类同级创建…

Java【Spring】Bean 的作用域和生命周期

文章目录 前言前言一、关于 Bean 的作用域问题引入二、Bean 的作用域1, 什么是 Bean 的作用域2, Bean 的六种作用域3, 设置 Bean 的作用域(解决开篇的问题) 三、Bean 的生命周期总结 前言 前言 各位读者好, 我是小陈, 这是我的个人主页, 希望我的专栏能够帮助到你: &#x1f4…

前端大屏常用的适配方案

假设我们正在开发一个可视化拖拽的搭建平台&#xff0c;可以拖拽生成工作台或可视化大屏&#xff0c;或者直接就是开发一个大屏&#xff0c;首先必须要考虑的一个问题就是页面如何适应屏幕&#xff0c;因为我们在搭建或开发时一般都会基于一个固定的宽高&#xff0c;但是实际的…

【K210】K210学习笔记一——sensor

【K210】K210学习笔记一——sensor 前言sensor的配置模块导入模块配置模块各配置解释 完整源码 前言 本人大四学生&#xff0c;电赛生涯已经走到尽头&#xff0c;一路上踩过不少坑&#xff0c;但运气也不错拿了两年省一&#xff0c;思来想去&#xff0c;决定开始写博客&#x…

基于Mysql+Vue+Django的协同过滤和内容推荐算法的智能音乐推荐系统——深度学习算法应用(含全部工程源码)+数据集

目录 前言总体设计系统整体结构图系统流程图 运行环境Python 环境MySQL环境VUE环境 模块实现1. 数据请求和储存2. 数据处理计算歌曲、歌手、用户相似度计算用户推荐集 3. 数据存储与后台4. 数据展示 系统测试工程源代码下载其它资料下载 前言 本项目以丰富的网易云音乐数据为基…