1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > element-ui vue-quill-editor 富文本编辑器 解决插入图片不采用base64 从服务器传图片在显示返回url

element-ui vue-quill-editor 富文本编辑器 解决插入图片不采用base64 从服务器传图片在显示返回url

时间:2019-08-11 21:15:45

相关推荐

element-ui vue-quill-editor 富文本编辑器 解决插入图片不采用base64 从服务器传图片在显示返回url

vue-quill-editor默认的图片插入方式,是直接将图片转成base64编码,这样的结果是整个富文本的html片段十分冗余。我们的服务器端接收的post的数据大小都是有限制的,这样的话导致提交失败,就算不提交失败,大量的数据存入数据库也不是好事。为了解决这个问题,我考虑了两个方案,换一个富文本编辑框框架,另一个是修改vue-quill-editor的框架代码。

百度一番,果断开始尝试修改框架代码框架,因为换个富文本编辑框有太多不确定性,增加测试成本。

解决方式

如上图,我们点击图片,不是把图片的base64编码插入富文本框,而是将本地文件上传到我的文件上传地址(我这里默认提供post方式上传图片,并且返回图片地址),将图片以html方式插入在富文本框内。这样由原来的图片数据优化为了<img src="...">的html格式数据。

template部分

vue data部分

vue method部分:

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。