quill富文本编辑器-粘贴图片上传，base64换线上地址保存

        富文本编辑器，粘贴一张本地图片会直接以base64格式展示，导致提交后端时内容过长，如果图片多了，导致数据库不好存储，如果文章被删，那么图片也不好找回，为了解决这个问题我们在粘贴图片之后将图片上传到服务器，拿到线上地址进行回显友好解决此类问题。

        话不多说上代码：

1、HTML

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

2、main.js中挂在全局axios

import axios from 'axios'
Vue.prototype.$axios= axios

 3、js

import Quill from "quill";
import  quillEditor  from 'vue-quill-editor';
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import { getToken } from "@/utils/auth";
import Video from "../../quill/video.js";
import imageResize from 'quill-image-resize-module';
Quill.register(Video,true);

export default {
  name: "Editor",
  data() {
    return {
      uploadUrl: process.env.VUE_APP_BASE_API + "/file/upload", // 上传的图片服务器地址
      headers: {
        Authorization: "Bearer " + getToken()
      },
      Quill: null,
      currentValue: "",
      options: {
        theme: "snow",
        bounds: document.body,
        debug: "warn",
        modules: {
          // 工具栏配置
          toolbar: {
            container:[
              ["bold", "italic", "underline", "strike"],       // 加粗 斜体 下划线 删除线
              ["blockquote", "code-block"],                    // 引用  代码块
              [{ list: "ordered" }, { list: "bullet" }],       // 有序、无序列表
              [{ indent: "-1" }, { indent: "+1" }],            // 缩进
              [{ size: ["small", false, "large", "huge"] }],   // 字体大小
              [{ header: [1, 2, 3, 4, 5, 6, false] }],         // 标题
              [{ color: [] }, { background: [] }],             // 字体颜色、字体背景颜色
              [{ align: [] }],                                 // 对齐方式
              ["clean"],                                       // 清除文本格式
              ["link", "image"]                       // 链接、图片、视频
            ]
          },
        },
        placeholder: "请输入内容",
        readOnly: this.readOnly,
      },
    };
  },
watch: {
    value: {
      handler(val) {
        if (val !== this.currentValue) {
          this.currentValue = val === null ? "" : val;
          if (this.Quill) {
            this.Quill.pasteHTML(this.currentValue);
          }
        }
      },
      immediate: true,
    },
  },
mounted() {
    this.init();
  },
beforeDestroy() {
    this.Quill = null;
  },
methods:{
init() {
      const editor = this.$refs.editor;
      this.Quill = new Quill(editor, this.options);
      window.addEventListener(
          "paste",
          (evt) => {
              if (
                  evt.clipboardData &&
                  evt.clipboardData.files &&
                  evt.clipboardData.files.length
              ) {
                  evt.preventDefault();
                  [].forEach.call(evt.clipboardData.files, (file) => {
                      if (!file.type.match(/^image\/(gif|jpe?g|a?png|bmp)/i)) {
                          return;
                      }
                      const formData = new FormData();
                      formData.append("file", file);
                      this.$axios.post(`${process.env.VUE_APP_BASE_API}/file/upload`, formData).then(
                          res => {
                            console.log(res);
                              if (res.data.code == 200) {
                                  console.log(res.data.data.src)
                                  let length = this.Quill.getSelection().index; //光标位置
                                  // 插入图片地址
                                  this.Quill.insertEmbed(length, "image", res.data.data.url);
                                  // 光标后移一位
                                  this.Quill.setSelection(length + 1);
                              } else {
                                  this.$message({
                                      message: res.data.message,
                                      type: 'warning'
                                  });
                              }
                          })

                  });
              }
          },
          false
      );
    },
  }
}

 欢迎各位大佬指正