問題描述

我們公司需要用到一款編輯器，里面需要粘貼圖片并上傳到服務(wù)器端；想了解一下怎么實現(xiàn)截圖粘貼，然后上傳服務(wù)器的方法，求大神解惑！！

問題解答

在input或textarea監(jiān)聽paste事件。

獲取剪貼板的圖片文件；

利用FileReader 讀取文件dataurl 用于預(yù)覽，如果需要的話。

調(diào)用上傳接口，直接上傳即可。

element.on(’paste’, function (event) { var e = event.originalEvent, clipboardData = e.clipboardData; if (clipboardData && clipboardData.items[0].type.indexOf(’image’) > -1) {var file = clipboardData.items[0].getAsFile();//讀取e.clipboardData中的數(shù)據(jù)：Blob對象if(!checkFileSize(file.size)){ Utils.safeApply(function () {$toaster.warning('只允許上傳小于5MB的圖片'); }); return;}var reader = new FileReader();reader.onload = function (e) { Utils.safeApply(function () {$rootScope.sendPicUrl = e.target.result;$rootScope.picFile = file;Chat.showSendPic2Dialog();//這里可以調(diào)用上傳接口，直接上傳。我這里是業(yè)務(wù)關(guān)系，需要通過對話框來預(yù)覽拷貝的圖片，然后在對話框內(nèi)再上傳。 }, $rootScope);};reader.readAsDataURL(file); }});