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

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}}}
}
···

相关文章:

  • 2020-06-23 暑期学习日更计划(机器学习入门之路(资源汇总)+概率论)
  • 【农气项目】基于适宜度的产量预报
  • HOW - Code Review 流程自动化
  • 使用 Typora + PicGo + Gitee/GitHub 构建 Markdown 图床技术方案
  • Kafka 命令行样例大全
  • 直观讲解生成对抗网络背后的数学原理
  • java kafka
  • servlet-优化
  • 数据仓库是什么?数据仓库架构有哪些?
  • C++/Qt中QActionGroup类用法
  • 6.第六章:数据分类的技术体系
  • 形象解释 HTTP 的四种常见请求方式及其中的区别联系
  • DDD领域驱动与传统CRUD
  • Datawhale AI春训营——用AI帮助老人点餐
  • 前端跨端框架的开发以及IOS和安卓的开发流程和打包上架的详细流程
  • (done) 吴恩达版提示词工程 3. 迭代 (控制输出长度、提取特定细节、输出 HTML 格式)
  • Ubuntu下软件运行常见异常退出问题汇总分析
  • Qt本地化 - installTranslator不生效
  • HarmonyOs @hadss/hmrouter路由接入
  • 外观模式:简化复杂系统接口的设计模式
  • 杨荫凯履新浙江省委常委、组织部部长,曾任中央财办副主任
  • 夜读丨囿于厨房与爱
  • 哈工大赵杰:人形机器人要拓展人的能力而非一味复制,未来产业要做成至少10年
  • 中国经济“第一省会”广州,从传统商贸中心到直播电商第一城
  • 上海五五购物节首次推出商圈精品推广节,9个商圈近百个商场参与促销
  • 展讯:漫游者秦龙和巫鸿的三本书