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

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.xdnf.cn/news/1713.html

相关文章:

  • 从 Java 到 Kotlin:在现有项目中迁移的最佳实践!
  • 区间问题大纲(贪心)
  • Linux 基础命令入门指南
  • 240424 leetcode exercises II
  • 2025年Redis分片存储性能优化指南
  • Docker 磁盘占用盘查和清理
  • 与智者同行:京东零售技术人的成长书单
  • 产品经理对于电商接口的梳理||电商接口文档梳理与接入
  • 多回路电表如何革新电力监控?安科瑞技术深度解析
  • Windows上Tomcat 11手动启动startup.bat关闭shutdown.bat
  • 【高频考点精讲】前端接口版本管理:如何优雅处理API版本升级?
  • 算法导论第4章思考题
  • 龙虎榜——20250424
  • onnx注册cpu版flashattention
  • 6.第六章:数据分类的技术体系
  • vscode插件系列-2、认识vscode
  • Java架构师面试:Mysql调优与慢查询定位
  • C++23文本编码革新:迈向更现代的字符处理
  • dumpsys activity activities中的Task和ActivityRecord信息解读
  • C# 综合示例 库存管理系统4 classMod类
  • 同城接单APP地图对接实现
  • 功能脑网络较新的方法[和ai讨论的方向和学习资源]
  • 解析 select 函数
  • Obsidian和Ollama大语言模型的交互过程
  • Kotlin Multiplatform--02:项目结构进阶
  • Kafka 命令行操作与 Spark-Streaming 核心编程总结
  • Python3 基础:变量、数据类型和基本运算
  • 驱动开发系列53 - 一个OpenGL应用程序是如何调用到驱动厂商GL库的
  • 济南国网数字化培训班学习笔记-第二组-5节-输电线路设计
  • vue3--手写手机屏组件