javascript - 一般本文編輯器里面的粘貼圖片的實現步驟是怎樣的？

問題描述

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

問題解答

在input或textarea監聽paste事件。

獲取剪貼板的圖片文件；

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

調用上傳接口，直接上傳即可。

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中的數據：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();//這里可以調用上傳接口，直接上傳。我這里是業務關系，需要通過對話框來預覽拷貝的圖片，然后在對話框內再上傳。 }, $rootScope);};reader.readAsDataURL(file); }});