一般本文编辑器里面的粘贴图片的实现步骤是怎样的？

Question

我们公司需要用到一款编辑器，里面需要粘贴图片并上传到服务器端；想了解一下怎么实现截图粘贴，然后上传服务器的方法，求大神解惑！！

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

                    }

                });