vue 富文本编辑器上传图片到服务器并显示到富文本中

问题：因为富文本编辑器上传图片后，是转成base64保存进数据库，图片过大时参数会很长。
前提条件：安装了quill富文本编辑器。npm install quill@1.3.6
1，安装好后在页面直接引入quill

import Quill from "quill";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";

2，先隐藏一个element的上传图片的组件

<el-upload
      :action="uploadUrl"
      :on-success="handleUploadSuccess"
      :on-error="handleUploadError"
      name="file"
      :show-file-list="false"
      :headers="headers"
      style="display: none"
      ref="upload"
      v-if="this.uploadUrl"
    >
    </el-upload>

3，生成富文本编辑器
生成位置

<div class="editor" ref="editor" :style="styles"></div>

参数

uploadUrl：process.env.VUE_APP_BASE_API+'/file/upload',//上传路径
Quill: null,//quill实例
currentValue: "",
options