如何解决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"
     >
     <div >
       <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导致字符太长的问题”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！