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.pswp.cn/diannao/80539.shtml
繁體地址,請注明出處:http://hk.pswp.cn/diannao/80539.shtml
英文地址,請注明出處:http://en.pswp.cn/diannao/80539.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

高效使用DeepSeek對“情境+ 對象 +問題“型課題進行開題!

目錄 思路"情境 對象 問題"型 課題選題的類型有哪些呢&#xff1f;這要從課題題目的構成說起。通過對歷年來國家社會科學基金立項項目進行分析&#xff0c;小編發現&#xff0c;課題選題類型非常豐富&#xff0c;但一般是圍繞限定詞、研究對象和研究問題進行不同的組…

cursor改Goland操作習慣

步驟1&#xff1a;設置主題 步驟2&#xff1a;安裝最新go插件 步驟3&#xff1a;安裝最新go版本 需要使用最新版本go1.24.1,設置玩環境變量&#xff0c;需要關閉cursor進程再打開 步驟4&#xff1a;安裝go相關工具 Command Shift P安裝完成后需要把go版本設置回自己項目合…

4.1.1 類的序列化與反序列化(XmlSerializer)

本文介紹XML序列化和反序列化操作 本例子中被序列化的類(Devices)中有一個List,其元素類型為&#xff1a;DigitalInputInfo. 序列化以及反序列化都很簡單&#xff1a; 序列化&#xff1a;即把類的對象輸出到文件中。 StreamWriter streamWriter new StreamWriter(filePath); …

OpenCV中的圖像旋轉方法詳解

文章目錄 引言1. 簡單的旋轉&#xff1a;cv2.rotate()2. 任意角度旋轉&#xff1a;cv2.getRotationMatrix2D() cv2.warpAffine()結論 引言 在計算機視覺和圖像處理領域&#xff0c;圖像旋轉是一項基礎而重要的操作。OpenCV作為最流行的計算機視覺庫之一&#xff0c;提供了多種…

C/C++ | 靜態修飾符static

文章目錄 概述一、定義介紹二、功能作用(一)static修飾全局變量(二)static修飾局部變量(三)static修飾成員變量(四)static修飾全局函數(五)static修飾成員函數三、代碼實例(一)static初始化被多次調用概述 本節詳細介紹了static修飾符的原理及用法。包括在變量、函數、類內等…

canvas畫板!隨意畫!!

希望你天天開心 代碼&#xff1a; <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>繪畫板</title…

Elasticsearch 使用reindex進行數據同步或索引重構

1、批量復制優化 POST _reindex {"source": {"index": "source","size": 5000},"dest": {"index": "dest"} }2、提高scroll的并行度優化 POST _reindex?slices5&refresh {"source": {…

Debian 12.10 root 登錄失敗,兩步解決!

大家好&#xff0c;這里是 DBA學習之路&#xff0c;專注于提升數據庫運維效率。 前言 今天看到 debian 正式發布 12.10&#xff0c;安裝完成后發現無法登錄 root 用戶&#xff1a; 這里我一開始懷疑是 root 密碼錯了&#xff0c;所以改了一下 root 密碼&#xff0c;忘記 root …

systemctl 命令詳解與常見問題解決

在 Linux 系統中&#xff0c;service 命令和 chkconfig 命令一直用于管理服務&#xff0c;但隨著 systemd 的引入&#xff0c;systemctl 命令逐漸成為主流。systemctl 命令不僅功能強大&#xff0c;而且使用簡單。本文將詳細介紹 systemctl 命令的作用以及常見問題的解決方法。…

【爬蟲】DrissionPage-獲取douyim用戶下的視頻

之前看過DrissionPage&#xff0c;覺得很厲害&#xff0c;比selenium簡單&#xff0c;適合新手。因為盲目跟風逆向&#xff0c;今天看了一個DrissionPage案例直播&#xff0c;學習一下&#xff0c;真香哈。 DrissionPage官網&#xff1a;&#x1f6f0;? 概述 | DrissionPage官…

中國礦業大學iGMAS分析中心介紹

一、關于GNSS和iGMAS 在浩瀚的太空中&#xff0c;全球衛星導航系統&#xff08;GNSS&#xff09;構建起精準定位的時空基準。IGMAS——國際GNSS監測評估系統&#xff0c;是由中國倡導并主導建設的全球GNSS監測網絡&#xff0c;旨在提供高精度、高可靠的導航、定位與授時服務。 …

清理HiNas(海納斯) Docker日志并限制日志大小

我在一個機頂盒的HiNas系統上跑Octoprint的docker版本&#xff0c;每隔一段時間盒子空間就被占完了&#xff0c;運行df -h之后&#xff0c;顯示/dev/root Use 100%。 Filesystem Size Used Avail Use% Mounted on /dev/root 6.6G 6.6G 0 100% / devtmpfs …

RK3588芯片NPU的使用:yolov8-pose例子圖片檢測在安卓系統部署與源碼深度解析(rknn api)

一、本文的目標 將yolo8-pose例子適配安卓端,提供選擇圖片后進行姿態識別功能。通過項目學習源碼和rknn api。二、開發環境說明 主機系統:Windows 11目標設備:搭載RK3588芯片的安卓開發板核心工具:Android Studio Koala | 2024.1.1 Patch 2,NDK 27.0三、適配(遷移)安卓 …

DeepSeek本地部署手冊

版本:v1.0 適用對象:零基礎開發者 一、部署前準備 1.1 硬件要求 組件最低配置推薦配置說明CPUIntel i5 8代Xeon Gold 6230需支持AVX指令集內存16GB64GB模型越大需求越高GPUNVIDIA GTX 1060 (6GB)RTX 3090 (24GB)需CUDA 11.7+存儲50GB可用空間1TB NVMe SSD建議預留2倍模型大小…

HashMap的源碼解析

HashMap基于哈希表的Map接口實現&#xff0c;是以key-value存儲形式存在&#xff0c;即主要用來存放鍵值對。HashMap的實現不是同步的&#xff0c;這意味著它不是線程安全的。它的key、value都可以為null。此外&#xff0c;HashMap中的映射不是有序的。 JDK1.8 之前 HashMap由數…

論文精讀:大規模MIMO波束選擇問題的量子計算解決方案

論文精讀&#xff1a;大規模MIMO波束選擇問題的量子計算解決方案 概要&#xff1a; 隨著大規模多輸入多輸出系統&#xff08;MIMO&#xff09;在5G及未來通信技術中的應用&#xff0c;波束選擇問題&#xff08;MBS&#xff09;成為提升系統性能的關鍵。傳統的波束選擇方法面臨計…

DPIN河內AI+DePIN峰會:共繪藍圖,加速構建去中心化AI基礎設施新生態

近日&#xff0c;一場聚焦前沿科技融合的盛會——AIDePIN峰會在越南河內成功舉辦。此次峰會由DPIN、QPIN及42DAO等Web3領域的創新項目聯合組織&#xff0c;匯聚了眾多Web3行業領袖、技術專家與社區成員。峰會于2025年4月19日舉行&#xff0c;其核心議題圍繞去中心化物理基礎設施…

品牌公關如何邀請媒體采訪?|微信文案模版

傳媒如春雨&#xff0c;潤物細無聲&#xff0c;大家好&#xff0c;我是51媒體胡老師。 &#x1f4f8;?不論是舉行活動、展會、發布會、推介會&#xff0c;還是新店開業&#x1f389; 都需要邀約媒體出席活動并采訪報道&#x1f3a4;&#x1f4f0; 我們需要在活動前提醒媒體參…

影樓精修-手部青筋祛除算法解析

注意&#xff1a;本文樣例圖片為了避免侵權&#xff0c;均使用AIGC生成&#xff1b; 手部青筋祛除科普 手部青筋祛除是影樓精修中一個非常精細的工作&#xff0c;需要較高的修圖技巧&#xff0c;目前市面上很少有自動化的青筋祛除功能的&#xff0c;而像素蛋糕目測是第一個做到…

智慧景區國標GB28181視頻平臺EasyGBS視頻融合應用全場景解決方案

一、方案背景? 隨著旅游業的蓬勃發展&#xff0c;景區的規模不斷擴大&#xff0c;游客數量持續增長&#xff0c;對景區的安全管理和游客服務質量提出了更高要求。打造一個高效、智能的視頻監控及管理系統成為景區運營的關鍵。EasyGBS作為一款基于國標GB28181協議的視頻云服務…