亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

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

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

汪汪一只貓 2018-11-22 18:14:30
我們公司需要用到一款編輯器,里面需要粘貼圖片并上傳到服務器端;想了解一下怎么實現截圖粘貼,然后上傳服務器的方法,求大神解惑!!
查看完整描述

1 回答

?
喵喵時光機

TA貢獻1846條經驗 獲得超7個贊

  1. 在input或textarea監聽paste事件。

  2. 獲取剪貼板的圖片文件;

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

  4. 調用上傳接口,直接上傳即可。

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);



                    }

                });


查看完整回答
反對 回復 2018-12-25
  • 1 回答
  • 0 關注
  • 454 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號