关于javascript:解决vuequilleditor大图片且大量图片上传卡顿问题

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)