关于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>

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)