javascript - Welche Schritte sind zum Einfügen von Bildern im allgemeinen Artikeleditor erforderlich?

Question

Unser Unternehmen benötigt einen Editor, in den Bilder eingefügt und auf den Server hochgeladen werden müssen.
Ich würde gerne wissen, wie man Screenshots einfügt und sie dann auf den Server hochlädt. Bitte helfen Sie mir! !

Answer 1

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


                    }
                });