Ueditor拖拽图片转base64

本文介绍如何在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的改动。

 

### UEditor 中处理 Base64 编码数据的方法 UEditor 支持多种方式来处理图像和其他多媒体资源。对于 Base64 编码的数据,通常是在前端通过 JavaScript 将图片换成 Base64 字符串并提交给服务器,在服务器端再将其解析为实际文件存储。 #### 前端部分 在浏览器环境中,可以利用 `FileReader` 对象读取用户选择的文件,并调用其 `readAsDataURL()` 方法将文件内容转为 Data URL 形式的 Base64 编码字符串[^1]: ```javascript function handleImageUpload(event) { const file = event.target.files[0]; let reader = new FileReader(); reader.onloadend = function() { console.log(reader.result); // 这里会打印出 base64 编码后的图片字符串 }; if (file) { reader.readAsDataURL(file); } } ``` 此代码片段展示了如何捕获用户的文件输入并将该文件作为 Base64 编码字符串加载到内存中。 #### 后端部分 为了使 UEditor 能够接收和处理这些 Base64 图像数据,可能需要修改控制器中的某些配置项或者添加自定义逻辑以便正确解析请求体内的 Base64 数据流。如果要允许 HTML 内容包含 `<img>` 标签形式的 Base64 图片,则需确保相应的验证机制不会阻止这种类型的上传操作[^2]。 假设正在使用 ASP.NET MVC 框架开发 Web 应用程序,那么可以在 Article 控制器下的 Create 和 Edit HTTP POST 方法上应用 `[ValidateInput(false)]` 属性以绕过默认的安全过滤规则,从而让带有 Base64 编码图片的内容能够被成功保存至数据库表单字段内。 另外一种常见的做法是先解码 Base64 字符串得到原始二进制字节数组,之后按照常规流程写入磁盘或云储存服务;与此同时更新富文本编辑区显示新上传成功的媒体链接地址。 #### 实现 Word 文档中嵌入式图片自动上传功能 针对 Microsoft Office 文档(如 .doc 或者 .docx 文件),其中往往包含了复杂的结构化信息以及多样的格式设置选项。因此,当涉及到此类文档内部所携带的图形素材时,就需要更加专业的解决方案——比如借助第三方库完成整个过程自动化处理工作。具体来说就是把来自客户端发送过来经过编码压缩过的 DOCX 流重新构建回原貌的同时提取所有的静态资源出来单独管理[^4]。 例如,可以通过复制特定版本号对应的 WordPaster 插件目录来增强 UEditor 功能集,使其具备识别粘贴板上的 Office 文本及其关联附件的能力。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值