我們公司需要用到一款編輯器,裡面需要貼上圖片並上傳到伺服器端;
想了解怎麼實(shí)現(xiàn)截圖貼上,然後上傳伺服器的方法,求大神解惑! !
在input或textarea監(jiān)聽(tīng)paste事件。
取得剪貼簿的圖片檔案;
利用FileReader 讀取檔案dataurl 來(lái)預(yù)覽,如果需要的話。
呼叫上傳接口,直接上傳即可。
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對(duì)象
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)系,需要通過(guò)對(duì)話框來(lái)預(yù)覽拷貝的圖片,然后在對(duì)話框內(nèi)再上傳。
}, $rootScope);
};
reader.readAsDataURL(file);
}
});