解决vue-quill-editor上传内容由于图片是base64的导致字符太长的问题

 更新时间:2018年08月20日 14:23:21   作者:灿爷的前端之路  
vue-quill-editor默认插入图片是直接将图片转为base64再放入内容中,如果图片较多,篇幅太长,就会比较烦恼,接下来通过本文给大家介绍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的)

<Upload
    id="iviewUp"
     ref="upload"
     :show-upload-list="false"
     :on-success="handleSingleSuccess"
     :format="['jpg','jpeg','png']"
     :max-size="2048"
     :headers="header"
     :on-format-error="handleFormatError"
     :before-upload="handleBeforeUpload()"
     type="drag"
     :action="serverUrl"
     style="display: none;width:0">
     <div style="width: 0">
       <Icon type="ios-camera" size="50"></Icon>
     </div>
   </Upload>
   <!--<Row>-->
    <quill-editor 
     v-model="detailContent" 
     ref="myQuillEditor" 
     :options="editorOption" 
     @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
     @change="onEditorChange($event)">
    </quill-editor>
   <!--</Row>-->

看到上面的代码有的的就会有疑问了,那上传好的图片要怎么插到富文本的指定光标里面呢,别慌,面包会有的,往下看,

handleSingleSuccess (res, file) {
   // res为图片服务器返回的数据
   // 获取富文本组件实例
   let vm = this
   let quill = this.$refs.myQuillEditor.quill
   console.log('res---', vm.$refs.myQuillEditor.quill.getSelection())
   // 如果上传成功
   if (res.res_code === '1') {
     // 获取光标所在位置
     let length = quill.getSelection().index;
     // 插入图片 res.info为服务器返回的图片地址
     quill.insertEmbed(length, 'image', res.result.url)
     // 调整光标到最后
     quill.setSelection(length + 1)
   } else {
     vm.$Message.error('图片插入失败')
   }
   // loading动画消失
   this.quillUpdateImg = false
  }

通过 this.$refs.myQuillEditor.quill.getSelection().index获取光标所在位置,将图片地址放在该位置即可

这样一来万事俱备,只欠东风了,这个时候大家会发现,那iview这个上传组件在页面上呢,我怎么实现点击富文本上的上传图片的按钮调用iview的上传组件的方法呢,

这个时候我们就要用到富文本中的配置属性editorOption,对editorOption进行图片上传的点击事件进行相应的配置即可,详情看下面代码

 editorOption: { // 富文本框配置
     placeholder: '',
     theme: 'snow', // or 'bubble'
     modules: {
       toolbar: {
         container: toolbarOptions, // 工具栏
         handlers: {
           'image': function (value) {
 

if (value) {
               document.querySelector('#iviewUp input').click()
             } else {
               this.quill.format('image', false);
             }
           }
         }
       }
     }
   }

 document.querySelector('#iviewUp input') 这个就是相应的dom节点的点击事件,将其绑在富文本的图片按钮点击事件上好了,基本上大功告成。还是算比较简单的,希望可以供大家参考

总结

以上所述是小编给大家介绍的解决vue-quill-editor上传内容由于图片是base64的导致字符太长的问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • 如何使用Vue3+elementPlus的Tree组件实现一个拖拽文件夹管理

    如何使用Vue3+elementPlus的Tree组件实现一个拖拽文件夹管理

    最近在做一个文件夹管理的功能,要实现一个树状的拖拽文件夹面板,里面包含两种元素,文件夹以及文件,这篇文章主要介绍了使用Vue3+elementPlus的Tree组件实现一个拖拽文件夹管理 ,需要的朋友可以参考下
    2023-09-09
  • Mpvue中使用Vant Weapp组件库的方法步骤

    Mpvue中使用Vant Weapp组件库的方法步骤

    这篇文章主要介绍了Mpvue中使用Vant Weapp组件库的方法步骤,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-05-05
  • Vue keep-alive实践总结(推荐)

    Vue keep-alive实践总结(推荐)

    本篇文章主要介绍了Vue keep-alive实践总结(推荐),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • vue动态添加背景图简单示例

    vue动态添加背景图简单示例

    这篇文章主要给大家介绍了关于vue动态添加背景图的相关资料,在一些场景下我们需要使用户可以进行自定义背景图片,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2023-07-07
  • vue2.0 better-scroll 实现移动端滑动的示例代码

    vue2.0 better-scroll 实现移动端滑动的示例代码

    本篇文章主要介绍了vue2.0 better-scroll 实现移动端滑动的示例代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
    2018-01-01
  • vue二次封装一个高频可复用组件的全过程

    vue二次封装一个高频可复用组件的全过程

    在开发Vue项目我们一般使用第三方UI组件库进行开发,但是这些组件提供的接口并不一定满足我们的需求,这时我们可以通过对组件库组件的二次封装,来满足我们特殊的需求,这篇文章主要给大家介绍了关于vue二次封装一个高频可复用组件的相关资料,需要的朋友可以参考下
    2022-10-10
  • el-form表单实现校验的示例代码

    el-form表单实现校验的示例代码

    本文主要介绍了el-form表单实现校验的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2024-07-07
  • Vue组件创建和传值的方法

    Vue组件创建和传值的方法

    这篇文章给大家介绍了vue组件创建和传值的方法,创建组件有三种方法,文中给大家介绍的非常详细,父组件传值给子组件的方法,给大家介绍的也非常详细,需要的朋友参考下吧
    2018-08-08
  • vant中field组件label属性两端对齐问题及解决

    vant中field组件label属性两端对齐问题及解决

    这篇文章主要介绍了vant中field组件label属性两端对齐问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-05-05
  • 详解Vue使用命令行搭建单页面应用

    详解Vue使用命令行搭建单页面应用

    本篇文章主要介绍了详解Vue使用命令行搭建单页面应用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-05-05

最新评论