富文本有图片时提交回显加载慢问题解决

问题分析：

富文本编辑器中添加图片时编辑器会将图片转化成base64的二进制文件，如此造成整个富文本内容非常大，富文本最后以带html标签的字符串格式存到数据库长字段，回显时将此长字符串查询返回前端通过v-html来渲染成对应dom，可想而知这么大的内容提交和回显的请求都是非常耗时的，导致页面延迟高，体验差

解决思路：

将图片二进制文件抽离出来异步上传服务器返回图片url替换富文本中的二进制部分

步骤：

1，前端编辑时解析富文本内容，通过正则匹配方式找到所有图片标签，抽离图片的二进制文件

2，后台编写文件存储接口，接收图片文件存到服务器，并将图片地址返回

3，前端将图片二进制文件封装成blob对象，使用formdata的形式提交到后台，用返回图片地址替换掉富文本中的图片base64二进制部分

富文本内容中只存图片地址，长度大大减小，而且图片上传和富文本上传是异步执行的，效率大大提高，而且回显时img标签通过地址异步获取图片数据，不管有多少图片都不会影响加载速度基本秒开

代码实现（请按照这个思路结合你的项目修改）：

后台接口：

 

 前端代码：

 效果对比：

修改前富文本内容：

修改后富文本内容：