js图片粘贴上传 [markdown文本编辑]

代码实现

// function initPasteDragImg(Editor){
//     var doc = document.getElementById(Editor.id)
//     doc.addEventListener('paste', function (event) {
//         var items = (event.clipboardData || window.clipboardData).items;
//         var file = null;
//         if (items && items.length) {
//             // 搜索剪切板items
//             for (var i = 0; i < items.length; i++) {
//                 if (items[i].type.indexOf('image') !== -1) {
//                     file = items[i].getAsFile();
//                     break;
//                 }
//             }
//         } else {
//             console.log("当前浏览器不支持");
//             return;
//         }
//         if (!file) {
//             console.log("粘贴内容非图片");
//             return;
//         }
//         uploadImg(file,Editor);
//     });
//
//     var dashboard = document.getElementById(Editor.id)
//     dashboard.addEventListener("dragover", function (e) {
//         e.preventDefault()
//         e.stopPropagation()
//     })
//     dashboard.addEventListener("dragenter", function (e) {
//         e.preventDefault()
//         e.stopPropagation()
//     })
//     dashboard.addEventListener("drop", function (e) {
//         e.preventDefault()
//         e.stopPropagation()
//         var files = this.files || e.dataTransfer.files;
//         uploadImg(files[0],Editor);
//     })
// }
// function uploadImg(file,Editor){
//     var formData = new FormData();
//     var fileName=new Date().getTime()+"."+file.name.split(".").pop();
//     formData.append('editormd-image-file', file, fileName);
//
//     $.ajax({
//         url: Editor.settings.imageUploadURL,
//         type: 'post',
//         data: formData,
//         processData: false,
//         contentType: false,
//         dataType: 'json',
//         success: function (msg) {
//
//             var success=msg['success'];
//             if(success==1){
//                 var url=msg["url"];
//                 if(/\.(png|jpg|jpeg|gif|bmp|ico)$/.test(url)){
//                     Editor.insertValue("![图片alt]("+msg["url"]+" ''图片title'')");
//                 }else{
//                     Editor.insertValue("[下载附件]("+msg["url"]+")");
//                 }
//             }else{
//                 console.log(msg);
//                 alert("上传失败");
//             }
//         }
//     });
//
//
// }



document.addEventListener('paste', function (event) {
    console.log(event);
    var isChrome = false;
    if (event.clipboardData || event.originalEvent) {
        //某些chrome版本使用的是event.originalEvent
        var clipboardData = (event.clipboardData || event.originalEvent.clipboardData);
        if(clipboardData.items){
            // for chrome
            var  items = clipboardData.items,
                len = items.length,
                blob = null;
            isChrome = true;
            for (var i = 0; i < len; i++) {
                console.log(items[i]);
                if (items[i].type.indexOf("image") !== -1) {
                    //getAsFile() 此方法只是living standard firefox ie11 并不支持
                    blob = items[i].getAsFile();
                    console.log(blob)
                    const formData = new FormData();
                    formData.append('file',blob)

                    _$_ajax_formData({
                        url:'/api/file',
                        method:'POST',
                        data:formData,
                        success: function (res) {
                            console.log('上传成功')
                            let str = window.contentEditor.getMarkdown();
                            str = str+'\r\n'+`![](${res.data.url})`
                            window.contentEditor.setMarkdown(str)
                        }
                    })


                    return
                }
            }
        }
    }

})