解决vue-quill-editor大图片且大量图片上传卡顿问题

vue-quill-editor默认插入图片是直接将图片转为base64再放入内容中，如果图片比较大的话，富文本的内容就会很大，即使图片不大，只要图片较为多，篇幅较长，富文本的内容也是异常的大的.
提供一个简单思路:选择完图片,将图片上传至服务器,服务器返回相应的url,前端将图片url插入到光标位置即可,然后将上传组件隐藏

<template>
     <el-upload
           class="avatar-uploader"
           :action="imageServerIp"
           :on-success="handleAvatarSuccess"
           :show-file-list="false"
           :before-upload="beforeAvatarUpload"
           style="display:none"
         >
           <img v-if="imageUrl" :src="imageUrl" class="avatar" />
           <i v-else class="el-icon-plus avatar-uploader-icon"></i>
         </el-upload>
         <quill-editor
           ref="myQuillEditor"
           v-model="data.content"
           class="quill-content editer"
           :options="editorOption"
           @ready="onEditorReady($event)"
         >
             </quill-editor>
     </template>

<script>
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.snow.css'
export default {
name: 'Home',
components: {

quillEditor

},
data () {

return {
  content: '',
  // 系统上传接口
  imageServerIp: '',
  imageUrl: '',
  editorOption: {
    theme: 'snow',
    modules: {
      toolbar: {
        container: [
          ['bold', 'italic', 'underline', 'strike'], // 加粗，斜体，下划线，删除线
          ['blockquote', 'code-block'], // 引用，代码块
          [{ header: 1 }, { header: 2 }], // 标题，键值对的形式；1、2表示字体大小
          [{ list: 'ordered' }, { list: 'bullet' }], // 列表
          [{ script: 'sub' }, { script: 'super' }], // 上下标
          [{ indent: '-1' }, { indent: '+1' }], // 缩进
          [{ direction: 'rtl' }], // 文本方向
          [{ size: ['small', false, 'large', 'huge'] }], // 字体大小
          [{ header: [1, 2, 3, 4, 5, 6, false] }], // 几级标题
          [{ color: [] }, { background: [] }], // 字体颜色，字体背景颜色
          [{ font: [] }], // 字体
          [{ align: [] }], // 对齐方式
          ['clean'], // 清除字体样式
          ['image', 'video']
        ],
        // 上传图片、上传视频
        handlers: {
          image: function (value) {
            if (value) {
              // 用upload的点击事件代替文本编辑器的图片上传事件
              document.getElementsByClassName('el-upload__input')[0].click()
            } else {
              this.quill.format('image', false)
            }
          }
        }
      }
    }
  }
}

},
computed: {

editor () {
  return this.$refs.myQuillEditor.quill
}

},
methods: {

handleAvatarSuccess (file, res) {
  // this.imageUrl = URL.createObjectURL(file.raw);
  const that = this
  //editor对象
  const quill = this.$refs.myQuillEditor.quill
  // 如果上传成功
  if (res.response.code === '0') {
    // 获取光标所在位置
    const length = quill.selection.savedRange.index
    // 插入图片  res.info为服务器返回的图片地址
    quill.insertEmbed(length, 'image', res.response.datas)
    // 调整光标到最后
    quill.setSelection(length + 1)
  } else {
    that.$Message.error('图片插入失败')
  }
  that.quillUpdateImg = false
},
beforeAvatarUpload (file) {
  const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
  const isLt2M = file.size / 1024 / 1024 < 2
  if (!isJPG) {
    this.$message.error('上传头像图片只能是JPG/PNG格式!')
  }
  if (!isLt2M) {
    this.$message.error('上传头像图片大小不能超过 2MB!')
  }
  return isJPG && isLt2M
},
onEditorReady () {
}

}

}
</script>

详细代码请看: [https://github.com/Lebronjamesgood/vue-editor-bigImage](https://github.com/Lebronjamesgood/vue-editor-bigImage)