Ueditor拖拽图片转base64

最新推荐文章于 2025-06-25 17:41:48 发布

清河木子

最新推荐文章于 2025-06-25 17:41:48 发布

阅读量7.2k

点赞数

CC 4.0 BY-SA版权

文章标签： ueditor Ueditor拖拽

本文链接：https://blog.youkuaiyun.com/FYW_wu/article/details/80680661

本文介绍如何在UEditor中实现图片拖拽并转换为Base64编码的功能，通过设置convertImageToBase64Enable参数及修改autoupload.js文件，使图片可以直接以Base64形式插入编辑器。

ueditor 中拖拽图片，默认的是会上传到服务器，然后根据服务器返回的结果来生成一般的<img>标签。

那么我需要实现拖拽图片，生成的是srcData形式的<img>标签。

1、在uedit的初始化参数中增加一个做 convertImageToBase64Enable。用来控制是按照原来的方式上传还是用转换成base64的形式来处理图片。

2、修改autoupload.js代码，重新编译打包；或者修改umeditor.js中对应位置代码。

改动点只有2处（以autoupload.js为例）：

a：增加了一个insertBase64Image 的 function。 第15行处。

b：根据convertImageToBase64Enable参数来判断对图片的处理是上传还是转Base64。第71行处。

autoupload.js：

/**
 * @description
 * 1.拖放文件到编辑区域，自动上传并插入到选区
 * 2.插入粘贴板的图片，自动上传并插入到选区
 * @author Jinqn
 * @date 2013-10-14
 */
UM.plugins['autoupload'] = function () {

    var me = this;

    me.setOpt('pasteImageEnabled', true);
    me.setOpt('dropFileEnabled', true);

    var insertBase64Image = function (file, editor) {
        var reader = new FileReader();
        reader.onload = function (e) {
            editor.execCommand('insertimage', {
                src: this.result,
                _src: this.result
            });
        };
        reader.readAsDataURL(file);
    }

    var sendAndInsertImage = function (file, editor) {
        //模拟数据
        var fd = new FormData();
        fd.append(editor.options.imageFieldName || 'upfile', file, file.name || ('blob.' + file.type.substr('image/'.length)));
        fd.append('type', 'ajax');
        var xhr = new XMLHttpRequest();
        xhr.open("post", me.options.imageUrl, true);
        xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
        xhr.addEventListener('load', function (e) {
            try {
                var json = eval('(' + e.target.response + ')'),
                    link = json.url,
                    picLink = me.options.imagePath + link;
                editor.execCommand('insertimage', {
                    src: picLink,
                    _src: picLink
                });
            } catch (er) {
            }
        });
        xhr.send(fd);
    };

    function getPasteImage(e) {
        return e.clipboardData && e.clipboardData.items && e.clipboardData.items.length == 1 && /^image\//.test(e.clipboardData.items[0].type) ? e.clipboardData.items : null;
    }

    function getDropImage(e) {
        return e.dataTransfer && e.dataTransfer.files ? e.dataTransfer.files : null;
    }

    me.addListener('ready', function () {
        if (window.FormData && window.FileReader) {
            var autoUploadHandler = function (e) {
                var hasImg = false,
                    items;
                //获取粘贴板文件列表或者拖放文件列表
                items = e.type == 'paste' ? getPasteImage(e.originalEvent) : getDropImage(e.originalEvent);
                if (items) {
                    var len = items.length,
                        file;
                    while (len--) {
                        file = items[len];
                        if (file.getAsFile) file = file.getAsFile();
                        if (file && file.size > 0 && /image\/\w+/i.test(file.type)) {
                            me.getOpt('convertImageToBase64Enable') ? insertBase64Image(file, me) : sendAndInsertImage(file, me);
                            hasImg = true;
                        }
                    }
                    if (hasImg) return false;
                }

            };
            me.getOpt('pasteImageEnabled') && me.$body.on('paste', autoUploadHandler);
            me.getOpt('dropFileEnabled') && me.$body.on('drop', autoUploadHandler);

            //取消拖放图片时出现的文字光标位置提示
            me.$body.on('dragover', function (e) {
                if (e.originalEvent.dataTransfer.types[0] == 'Files') {
                    return false;
                }
            });
        }
    });

};

以上就是autoupload.js的改动。