vue-quill-editor 图片上传处理

vue-quill-editor 上传图片是将图片转为base64编码，当图片比较大时，提交到后台时参数过长会导致提交失败。如下图：

解决方法：

把富文本内的图片动态上传到服务器，然后把图片加载到富文本编辑器。这样一来，图片标签内只需要存储图片的网络地址就可以了。

具体实现：

（1）组件内调用element的upload组件和vue-quill-editor编辑器；

<template>
  <div class="quill-editor">
    <!-- 图片上传组件辅助，组件内添加v-show=“false”属性，把该组件隐藏起来。-->
    <el-upload class="avatar-uploader" :action="uploadUrl" name="img" :show-file-list="false" :on-success="uploadSuccess" :before-upload="beforeUpload">
    </el-upload>
    <!--富文本编辑器组件-->
    <quill-editor v-model="content" :content="content" :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @ready="onEditorReady($event)" ref="QuillEditor">
    </quill-editor>
    <div v-html="content" />
  </div>
</template>

（2）在data函数内，设置upoad组件的图片上传接口地址；处理函数中匹配 image，定义富文本编辑器内的图片上传按钮点击事件，当点击上传图片图标时，触发 upoad 组件的图片上传事件；

 handlers: {
   
              image: function (value) {
   
                if (value) {
   
                  // 调用element的图片上传组件
                  document.querySelector('.avatar-uploader input').click()
                } else {
   
                  this.quill.format('image', false)
                }
              }
}

（3）methods中，完善 upload图片上传成功事件。图片上传成功后，把图片加载到富文本编辑器内。