前言

站在用戶的角度思考問題，與客戶深入溝通，找到烏拉特中網站設計與烏拉特中網站推廣的解決方案，憑借多年的經驗，讓設計與互聯(lián)網技術結合，創(chuàng)造個性化、用戶體驗好的作品，建站類型包括：成都網站設計、網站制作、企業(yè)官網、英文網站、手機端網站、網站推廣、域名申請、網絡空間、企業(yè)郵箱。業(yè)務覆蓋烏拉特中地區(qū)。

我們在使用QQ進行聊天時，從別的地方Ctrl+C一張圖片，然后在聊天窗口Ctrl+V，QQ就會將你剛才復制的圖片粘貼到即將發(fā)送的消息容器里，按下Enter鍵，這張圖片將會發(fā)送出去。接下來跟各位開發(fā)者分享下這項功能在Vue中如何來實現。先跟大家展示下最終實現的效果。在線體驗地址

實現思路

• 頁面掛載時監(jiān)聽剪切板粘貼事件
• 監(jiān)聽文件流
• 讀取文件流中的數據
• 創(chuàng)建img標簽
• 將獲取到的base64碼賦值到img標簽的src屬性
• 將生成的img標簽append到即將發(fā)送的消息容器里
• 監(jiān)聽回車事件
• 獲取可編輯div容器中的所有子元素
• 遍歷獲取到的元素，找出img元素
• 判斷當前img元素是否有alt屬性（表情插入時有alt屬性），
• 如果沒有alt屬性當前元素就是圖片
• 將base64格式的圖片轉成文件上傳至服務器
• 上傳成功后，將服務器返回的圖片地址推送到websocket服務
• 客戶端收到推送后，渲染頁面

實現過程

本片文章主要講解剪切板圖片的解析以及將base64圖片轉換成文件上傳至服務器，下方代碼中的axios的封裝以及websocket的配置與使用可參考我的另外兩篇文章：Vue合理配置axios并在項目中進行實際應用和Vue合理配置WebSocket并實現群聊

監(jiān)聽剪切板事件(mounted生命周期中)，將圖片渲染到即將發(fā)送到消息容器里

const that = this;
document.body.addEventListener('paste', function (event) {
 // 自己寫的一個全屏加載插件，文章地址：https://juejin.im/post/5e3307145188252c30002fa7
 that.$fullScreenLoading.show("讀取圖片中");
 // 獲取當前輸入框內的文字
 const oldText = that.$refs.msgInputContainer.textContent;
 // 讀取圖片
 let items = event.clipboardData && event.clipboardData.items;
 let file = null;
 if (items && items.length) {
 // 檢索剪切板items
 for (let i = 0; i < items.length; i++) {
  if (items[i].type.indexOf('image') !== -1) {
  file = items[i].getAsFile();
  break;
  }
 }
 }
 // 預覽圖片
 const reader = new FileReader();
 reader.onload = function(event) {
 // 圖片內容
 const imgContent = event.target.result;
 // 創(chuàng)建img標簽
 let img = document.createElement('img');//創(chuàng)建一個img
 // 獲取當前base64圖片信息，計算當前圖片寬高以及壓縮比例
 let imgObj = new Image();
 let imgWidth = "";
 let imgHeight = "";
 let scale = 1;
 imgObj.src = imgContent;
 imgObj.onload = function() {
  // 計算img寬高
  if(this.width<400){
  imgWidth = this.width;
  imgHeight = this.height;
  }else{
  // 輸入框圖片顯示縮小10倍
  imgWidth = this.width/10;
  imgHeight = this.height/10;
  // 圖片寬度大于1920，圖片壓縮5倍
  if(this.width>1920){
   // 真實比例縮小5倍
   scale = 5;
  }
  }
  // 設置可編輯div中圖片寬高
  img.width = imgWidth;
  img.height = imgHeight;
  // 壓縮圖片，渲染頁面
  that.compressPic(imgContent,scale,function (newBlob,newBase) {
  // 刪除可編輯div中的圖片名稱
  that.$refs.msgInputContainer.textContent = oldText;
  img.src = newBase; //設置鏈接
  // 圖片渲染
  that.$refs.msgInputContainer.append(img);
  that.$fullScreenLoading.hide();
  });
 };
 };
 reader.readAsDataURL(file);
});

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

標題名稱：Vue解析剪切板圖片并實現發(fā)送功能-創(chuàng)新互聯(lián)
當前路徑：http://jinyejixie.com/article44/gphee.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供App設計、自適應網站、建站公司、關鍵詞優(yōu)化、外貿建站、域名注冊

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)