当前位置: 首页 > news >正文

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

在①中,粘贴图片,图片能够自动添加到底下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.lryc.cn/news/133359.html

相关文章:

  • 时序预测 | MATLAB实现基于CNN-BiLSTM卷积双向长短期记忆神经网络的时间序列预测-递归预测未来(多指标评价)
  • 编织梦想:SpringBoot AOP 教程与自定义日志切面完整实战
  • AssignableTypeFilter 和 AnnotationTypeFilter什么区别?
  • TCP-事件模型
  • typescript 声明文件
  • BC96 有序序列判断
  • QT操作excel的两种方式 QT基础入门【Excel的操作】
  • c++ qt--QString,弹出框(第二部分)
  • CSS自学框架之动画
  • RabbitMQ的5种消息队列
  • 【C语言】选择排序
  • 异步更新队列 - Vue2 响应式
  • 【Unity的URP渲染管线下实现扩展后处理Volume组件_TemporalAntiAliasing(TAA)_抗锯齿(附带下载链接)】
  • NineData通过AWS FTR认证,打造安全可靠的数据管理平台
  • Qt应用开发(基础篇)——滚屏区域类 QScrollArea
  • 安装最新版chromedriver 116,亲测可用
  • html题库
  • Android11 中 LED 使用-RK3568
  • BC77 有序序列插入一个数
  • 通过脚本使用Cppcheck做静态测试并生成报告(Windows)
  • 工业安全生产信息化平台的基本架构和关键功能分享
  • 每日一道面试题之session 和 cookie 有什么区别?
  • SHELL 基础 显示字符颜色, 修改历史命令,Linux里的命令 执行顺序
  • Vue 和 JQuery 的区别在哪?为什么 JQuery 会被 Vue 取代?
  • Spring 中 Bean 注入与获取
  • STM32 中断复习
  • Django的模型
  • 非计算机科班如何丝滑转码
  • PyTorch深度学习实战(12)——数据增强
  • SpringCloud Ribbon中的7种负载均衡策略