关于百度ueditor粘贴图片自动上传

大佬教程收集整理的这篇文章主要介绍了关于百度ueditor粘贴图片自动上传，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

​

图片的复制无非有两种方法，一种是图片直接上传到服务器，另外一种转换成二进制流的base64码 目前限chrome浏览器使用 首先以um-editor的二进制流保存为例： 打开umeditor.js，找到Um.plugins['autoupload']，然后找到autoUploadHandler方法，注释掉其中的代码。 加入下面的代码：

//判断剪贴板的内容是否包含文本

//首先解释一下为什么要判断文本是不是为空

//在ctrl+c word中的文字或者图片之后会返回1种(image/png)或者4种type(text/plain,text/html,text/rtf,image/png)类型的对象

//为了兼容4种格式的情况，做了如下的判断

//如下代码：e.originalEvent.clipboardData.items获得剪贴板的内容

//当粘贴了文本之后text是不为空的，同时也会返回当前文本的图片类型

//如果有文字的话不做任何的处理，如果只粘贴图片的话文本一定是空的，包括复制的桌面图片或者截图的图片

var text = e.originalEvent.clipboardData.getData("text");

if(text == ""){

    var items=e.originalEvent.clipboardData.items;

     for (var i = 0, len = items.length; i < len; i++) {

        var item = items[i];

       if ( item.kind == 'file' && item.type.indexOf('image/') !== -1 ) {

         

              var blob = item.getAsFile();

              getBase64(blob, function( base64 ) {

              //sendAndInsertImage(base64,mE); 上传到服务器

               setBase64Image(base64,mE);

              });

              //阻止默认事件, 避免重复添加;

              e.originalEvent.preventDefault();

             };

        }

}

两个方法：

//执行插入图片的操作

function setBase64Image(base64,editor){

    editor.execCommand('insertimage', {src: base64,_src: base64});

}

//获得base64

function  getBase64(blob, callBACk) {

    var a = new FileReader();

    a.onload = function(E) {CallBACk(e.target.result);};

    a.readAsDataURL(blob);

};

效果展示：

​ 详细内容可参考这篇文章：http://blog.ncmem.com/wordpress/2019/08/07/ueditor-word%e5%9b%be%e7%89%87%e4%b8%8a%e4%bc%a0/

讨论群：223813913

 

​

大佬总结

以上是大佬教程为你收集整理的关于百度ueditor粘贴图片自动上传全部内容，希望文章能够帮你解决关于百度ueditor粘贴图片自动上传所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。