Quill改图片Base64转码为上传至服务器

image

引子

无意中搜索到这个漂亮的富文本编辑器，苦于全是英文，学习起来还是有些困难的，以至于到现在也只是会使用一些简单的功能，要说深入理解？算了，我一般只是浅尝辄止...

当我发现「工具栏」中的「图片」按钮是将图片编码为 Base64 后直接插入正文中，例如：

随便一个图片就能让编码无比巨长，看似方便了但却带来了不少问题，比如数据库存储、后续图片处理等等。想来，一般的网站处理方式都是将文件上传至服务器，然后返回图片所在的路径，将之与正文分开存储与管理。Github有成熟的基于 Vue 的图片处理插件，但不用 Vue 的我怎么办呢？

解决

既然官方原生的解决办法不适用，当然是去 Quill 的 Github 项目的 Issue 页面找找其他人有没有同样的需求。

TaylorPzreal 的回答给十分有用。

解决思路是：重写「image」方法，自己增加图片上传功能并返回图片URL，然后将图片重新插入编辑器。

步骤

重写「image」方法

//重写图片上传功能
vartoolbar = Quill.getModule('toolbar');toolbar.addHandler('image', imageUpload);

获取预定义的 toobar 然后通过后期新增 Handler 是办法对 image 进行重写。imageUpload 就是即将进行文件上传的自定义方法。

自定义上传方法

function imageUpload(value)
{
    //点击图片，则value值为true
    if(value) {
        //创建隐藏的文件上传input
        const input = document.createElement('input');
        input.setAttribute('type', 'file');
        input.setAttribute('accept', 'image/*');
        input.click();
        input.onchange = function() {
            const file = input.files[0];
            //判断文件是否为图片
            if(! /image\/\w+/.test(file.type)) {
                console.log('只能选择图片');
                return false;
            } else {
                //使用FormData创建键值对数据
                var fd = new FormData();
                fd.append('imgFile', file);
                $.ajax({
                    type: 'post',
                    url: '/ajax/imgUpload',
                    dataType: 'json',
                    contentType: false,
                    processData: false,
                    data: fd,
                    success: function (result) {
                        //上传成功，准备将图片插入编辑框中
                        if (result.success === true) {
                            //取得上传后返回所在的路径
                            var imgUrl = result.url;
                            //取得图片应该所在的位置
                            var currentPosition = Quill.getSelection();
                            //插入编辑框
                            newBlog.insertEmbed(currentPosition, 'image', imgUrl);
                            //显示成功提示
                            console.log('上传成功');
                        } else {
                            console.log(result);
                        }
                    },
                    error: function (jqXHR) {
                        console.log('错误，' + jqXHR.status);
                    }
                });
            }
        }
    }
}

创建隐藏的 input 标签，并模拟触发点击事件，获取用户选中的图片；

使用 FormData 创建数据键值对后通过 Ajax 将文件发送到服务器；

获取后台返回的 result 值，其中包含了成功时的图片路径，或失败时的错误信息

获取当前光标在文本框中的位置，使用 insertEmbed 将图片路径插入编辑框中。

服务端处理

//使用$_FILES打印
print_r($_FILES);

至于如何处理，就看自己的需求了。但是需要注意的是图片名字不能为中文，最好重命名。

遗留问题

由于是先上传后提交文章，导致了图片与文章的关联性不够好，不能在一堆上传好的图片中看出个所以然来。

在编辑框中，如果删除了图片，如何将该图片在服务器中同时删除？Quill 提供的 text-change 事件使用起来似乎很麻烦。

图片尺寸问题由于Github上的一个 ImageResize插件引用注册失败，暂时没有解决。

原文链接：https://shorylee.com/blog/detail/4

最后编辑于：2018.04.10 12:39:41