解决vue-quill-editor上传内容由于图片是base64的导致字符太长的问题

解决vue-quill-editor上传内容中图片base64字符串过长的问题，有以下几种方式：

1. 使用quill-image-extend-module

quill-image-extend-module是一个扩展模块，它可以让quill-editor支持图片上传。它会将上传的图片文件转换成base64格式，然后插入到编辑器内容中，这会导致编辑器内容变得过长。为了解决这个问题，我们可以通过修改源代码的方式来实现。

步骤：

1. 安装quill-image-extend-module

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

1. 修改代码，引入quill-image-extend-module，并且在quill-editor创建前初始化该模块，然后在图片上传时将base64字符串转换成blob格式。代码示例：

<template>
  <quill-editor v-model="content" ref="editorRef" />
</template>

<script>
import Quill from "quill";
import ImageExtend from "quill-image-extend-module";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";

export default {
  name: "editor",
  data() {
    return {
      content: "",
    };
  },
  mounted() {
    this.initEditor();
  },
  methods: {
    initEditor() {
      let options = {
        modules: {
          toolbar: [
            ["bold", "italic", "underline", "strike"], // toggled buttons
            ["blockquote", "code-block"],
            [{ header: 1 }, { header: 2 }], // custom button values
            [{ list: "ordered" }, { list: "bullet" }],
            [{ script: "sub" }, { script: "super" }], // superscript/subscript
            [{ indent: "-1" }, { indent: "+1" }], // outdent/indent
            [{ direction: "rtl" }], // text direction
            [{ size: ["small", false, "large", "huge"] }], // custom dropdown
            [{ header: [1, 2, 3, 4, 5, 6, false] }],
            [{ color: [] }, { background: [] }], // dropdown with defaults from theme
            [{ font: [] }],
            [{ align: [] }],
            ["link", "image", "video"],
            ["clean"], // remove formatting button
          ],
        },
        theme: "snow",
        placeholder: "请输入内容",
      };
      Quill.register("modules/imageExtend", ImageExtend);
      this.editor = new Quill(this.$refs.editorRef.$el, options);
      this.editor.getModule("toolbar").addHandler("image", this.selectLocalImage);
    },
    selectLocalImage() {
      const input = document.createElement("input");
      input.setAttribute("type", "file");
      input.click();

      // Listen upload local image and save to server
      input.onchange = () => {
        const file = input.files[0];

        let formData = new FormData();
        formData.append("file", file);

        let xhr = new XMLHttpRequest();
        xhr.open("POST", "/api/upload/image", true);
        xhr.setRequestHeader("Authorization", "Bearer " + getAccessToken());
        xhr.onload = (e) => {
          if (xhr.status === 200 && xhr.readyState === 4) {
            let url = JSON.parse(xhr.responseText).url;
            const range = this.editor.getSelection(true);
            this.editor.insertEmbed(range.index, "image", url);
          }
        };
        xhr.send(formData);
      };
    },
  },
};
</script>

2. 使用外部图片服务器

另外一种方式是使用外部图片服务器，将图片上传到指定的图片服务器上，然后在编辑器中插入图片的时候，使用图片的URL地址即可。这种方法不需要将base64字符串插入到编辑器内容中，所以编辑器内容不会过长。

示例：

在html中使用编辑器：

<template>
  <quill-editor v-model="content" ref="editorRef" />
</template>

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

export default {
  name: "editor",
  data() {
    return {
      content: "",
    };
  },
  mounted() {
    this.initEditor();
  },
  methods: {
    initEditor() {
      let options = {
        modules: {
          toolbar: [
            ["bold", "italic", "underline", "strike"], // toggled buttons
            ["blockquote", "code-block"],
            [{ header: 1 }, { header: 2 }], // custom button values
            [{ list: "ordered" }, { list: "bullet" }],
            [{ script: "sub" }, { script: "super" }], // superscript/subscript
            [{ indent: "-1" }, { indent: "+1" }], // outdent/indent
            [{ direction: "rtl" }], // text direction
            [{ size: ["small", false, "large", "huge"] }], // custom dropdown
            [{ header: [1, 2, 3, 4, 5, 6, false] }],
            [{ color: [] }, { background: [] }], // dropdown with defaults from theme
            [{ font: [] }],
            [{ align: [] }],
            ["link", "image", "video"],
            ["clean"], // remove formatting button
          ],
        },
        theme: "snow",
        placeholder: "请输入内容",
      };
      this.editor = new Quill(this.$refs.editorRef.$el, options);
    },
  },
};
</script>

在上传图片的接口中，将上传的图片保存到外部图片服务器中，并返回图片的URL地址。

const axios = require("axios");
const FormData = require("form-data");

async function uploadImageToFtp(req, res, next) {
  try {
    const formData = new FormData();
    formData.append("file", req.file.buffer, req.file.originalname);

    const { data: { url } } = await axios.post("http://外部图片服务器地址", formData, {
      headers: {
        ...formData.getHeaders(),
        Authorization: `Bearer ${req.headers.authorization}`,
      },
    });

    res.send({ url });
  } catch (err) {
    next(err);
  }
}

module.exports = { uploadImageToFtp };

在插入图片的时候，将图片的URL地址作为参数进行插入。

const range = this.editor.getSelection();
this.editor.insertEmbed(range.index, "image", url);