截屏图片通过粘贴到输入框上传图片

有这样一个需求场景,在聊天的时候,通过微信或是QQ截屏,截屏的图片保存在粘贴板里,在输入框中Control+V就直接上传图片,并发送给对方。

document.onpaste = function (event) {
                if($(event.target).hasClass('chat-input')){
                    let items = (event.clipboardData || event.originalEvent.clipboardData).items;
                    let item = items[items.length - 1];
                    if (item.kind === 'file' && item.type == "image/png") {
                        let blob = item.getAsFile();
                        let form = new FormData();
                        form.append('file',blob);
                        layer.load(2);
                        $.ajax({
                            type:'post',
                            url:'/upload/image',
                            data:form,
                            dataType:"json",
                            cache:false,
                            processData:false,
                            contentType:false,
                            success(res){
                                if(res.errcode===0&&res.data.full_url){
                                    that.sendImage(res.data.full_url);
                                }
                                layer.closeAll();
                            }
                        })
                    }
                }
            };

参考资料:https://www.jianshu.com/p/1f9d7587d456