Quill改图片Base64转码为上传至服务器
Quill很美。
image
引子
无意中搜索到这个漂亮的富文本编辑器，苦于全是英文，学习起来还是有些困难的，以至于到现在也只是会使用一些简单的功能，要说深入理解？算了，我一般只是浅尝辄止...
当我发现「工具栏」中的「图片」按钮是将图片编码为 Base64 后直接插入正文中，例如：
随便一个图片就能让编码无比巨长，看似方便了但却带来了不少问题，比如数据库存储、后续图片处理等等。想来，一般的网站处理方式都是将文件上传至服务器，然后返回图片所在的路径，将之与正文分开存储与管理。Github有成熟的基于 Vue 的图片处理插件，但不用 Vue 的我怎么办呢？
解决
既然官方原生的解决办法不适用，当然是去 Quill 的 Github 项目的 Issue 页面找找其他人有没有同样的需求。
TaylorPzreal 的回答给十分有用。
解决思路是：重写 「image」方法，自己增加图片上传功能并返回图片URL，然后将图片重新插入编辑器。
步骤
//重写图片上传功能
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插件引用注册失败，暂时没有解决。
