解决vue-quill-editor上传内容由于图片是base64的导致字符太长的
vue-quill-editor是个较为轻量级富文本框,相较于ueditor,开发更编辑,更加直观,如果大家伙在需求允许的情况下,还是会比较建议使用vue-quill-editor。 vue-quill-editor的使用方法在这边就不多说了,大家网上查下,一抓一大把 但是在使用vue-quill-editor有一个致命的问题,vue-quill-editor默认插入图片是直接将图片转为base64再放入内容中,如果图片比较大的话,富文本的内容就会很大,即使图片不大,只要图片较为多,篇幅较长,富文本的内容也是异常的大的,这就会给大家带来一些烦恼,我们可能更希望在提交富文本的内容的时候图片只是以图片地址提交,那这样一来我们要怎么去处理呢,接下来大家可以来理一理 还是老思路,既然我们可以希望不是直接将图片转成base64,那么我们可以采用选择完图片,即将图片上传服务器,服务器返回相应的图片链接,前端将图片链接插入到富文本的指定光标上即可,这样一来就可以实现我们的想要的效果了 首先,新建富文本组件QuillEditor.vue,利用iview的上传组件来上传选择完的图片(当然,其他的上传组件也是ok的) 看到上面的代码有的的就会有疑问了,那上传好的图片要怎么插到富文本的指定光标里面呢,别慌,面包会有的,往下看, 通过 这样一来万事俱备,只欠东风了,这个时候大家会发现,那iview这个上传组件在页面上呢,我怎么实现点击富文本上的上传图片的按钮调用iview的上传组件的方法呢, 这个时候我们就要用到富文本中的配置属性 if (value) {
document.querySelector('#iviewUp input').click() } else { this.quill.format('image',false); } } } } } }
总结以上所述是小编给大家介绍的解决vue-quill-editor上传内容由于图片是base64的导致字符太长的问题。编程之家 52php.cn 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
- 一篇很详细很全的OGG配置文档
- FAIL - Context /SsmApp is defined in server.xml and may
- C++ set用法(STL set用法)详解
- 在C中释放被阻塞流的缓冲区
- 前端每周清单第 49 期:Webpack 4 Beta 尝鲜,React Window
- objective-c – 使用NSFetchedResultsController删除节中的
- 用ajax做登陆时实现简单的加密
- 二级菜单联动 ajax+json
- c# – 在Windows服务中托管的WCF中的IoC和每次调用的容器生
- c# – 如何使用System.Linq.Expressions API模拟“typeof(T