问题：
vue-quill-editor富文本编辑器上传图片默认为base64，存入数据库过于过于庞大，使用quill-image-extend-module+vue-quill-editor实现图片地址上传。

解决完之后效果图：

解决思路：
哈哈，第一步当然去看vue-quill-editor官网了，官网提供了quill-image-extend-module模块专门处理图片上传问题。
官网有个QuillWatch模块，这里没有采用，我用的方法思路很简单就是：劫持原来的图片上传事件，然后上传到服务器，服务器返回一个图片链接，我再给插进去。

代码：
在下载quill-image-extend-module之前你肯定得下载好了vue-quill-editor，不知道怎么配置点击这里。

 npm install quill-image-extend-module --save-dev

html:
        <quill-editor
        v-loading="videoLoading"
          element-loading-text="视频正在上传"
          ref="myQuillEditor"
          v-model="articleInfo.content"
          :options="editorOption"
          @change="onEditorChange($event)"
        ></quill-editor>
        <input
          type="file"
          accept=".png,.jpg,.jpeg"
          @change="change"
          id="upload"
          style="display: none"
        />
        
导入：
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import { quillEditor, Quill } from "vue-quill-editor";
import { container, ImageExtend } from "quill-image-extend-module";
Quill.register("modules/ImageExtend", ImageExtend);

data：
 editorOption: {
        //富文本配置项
        placeholder: "编辑文章内容",
        theme: "snow",
        modules: {
          ImageExtend: {
            loading: true,
            name: "pictureFile",
            size: 6,
            action: "http://101.68.86.229:8559/api/resources/pictureUploal",
            response: (res) => {
              return res.data;
            },
            headers: (xhr) => {
              xhr.setRequestHeader(
                "Authorization",
                window.sessionStorage.getItem("token")
              );
            },
            start: () => {},
            end: () => {},
            error: () => {},
            change: (xhr, formData) => {},
          },
          toolbar: {
            container: container,
            //拦截
            handlers: {
              image: function (value) {
                if (value) {
                  document.querySelector("#upload").click(); // 劫持原来的图片点击按钮事件
                }
              }
            },
          },
        },
      },
重点：
    //makdown上传图片
    change(e) {
      let file = e.target.files[0];
      const formData = new FormData();
      formData.append("pictureFile", file);
      makdwnImg(formData)
        .then((res) => {
          let quill = this.$refs.myQuillEditor.quill;
          if (res.data.code == 200) {
            // const formdata = _.extend({}, this.formdata)
            let length = quill.getSelection().index; //光标位置
            // 插入图片  图片地址
            quill.insertEmbed(length, "image", res.data.data);
            // 调整光标到最后
            quill.setSelection(length + 1); //光标后移一位
          }
        })
        .catch((err) => {
          console.error(err);
        });
    }