javascript - What are the steps for pasting images in the general article editor?

Question

Our company needs to use an editor, in which pictures need to be pasted and uploaded to the server;
I want to know how to paste screenshots and then upload them to the server, please let me know! !

Answer 1

1. Listen to the paste event in input or textarea.

2. Get the image file from the clipboard;

3. Use FileReader to read the file dataurl for preview, if needed.

4. Call the upload interface and upload directly.

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


                    }
                });