vue-quill-editor富文本编辑器结合antui上传图片格式base64转成图片路径

1、安装vue-quill-editor

使用命令：npm install vue-quill-editor -S

2、在插入代码

import { quillEditor } from "vue-quill-editor";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";

3.写入插件代码

              <quill-editor
                v-model="courseInfo.course_intro"
                :options="editorOption"
                ref="myQuillEditor"
                style="height: 300px"
              ></quill-editor>
              <a-upload
                class="avatar-uploader1"
                name="file"
                :multiple="false"
                :showUploadList="false"
                :before-upload="beforeCourse_introUpload"
                :customRequest="imgBodyCourse_introUpload"
              ></a-upload>

quill-editor：其中 options 为配置内容

      editorOption: {
        placeholder: "请输入课程简介...",
        theme: "snow",
        modules: {
          toolbar: {
            container: toolbarOptions, // 工具栏
            handlers: {
              image: function (value) {
                if (value) {
                  // 触发input框选择图片文件
                  document.querySelector(".avatar-uploader1 input").click();
                } else {
                  this.quill.format("image", false);
                }
              },
            },
          },
        },
      },

const toolbarOptions = [
  [{ color: [] }, { background: [] }],
  ["bold", "italic", "underline", "strike"],
  [{ size: ["small", false, "large"] }],
  [{ list: "ordered" }, { list: "bullet" }],
  ["link", "image"],
  [{ align: [] }],
];

a-upload：before-upload 为文件上传校验

// 课程介绍图片上传前校验
    beforeCourse_introUpload(file) {
      const isJpgOrPng =
        file.type === "image/jpeg" || file.type === "image/png";
      if (!isJpgOrPng) {
        this.$message.error("图片格式错误，请上传jpg或png格式");
      }
      const isLt2M = file.size / 1024 / 1024 < 10;
      if (!isLt2M) {
        this.$message.error("图片大小要小于10MB!");
      }
      return isJpgOrPng && isLt2M;
    },

a-upload：customRequest 为文件覆盖上传路径，自定义上传

// 上传新闻图片
    imgBodyCourse_introUpload(file) {
      const formData = new FormData();
      formData.append("Files", file.file);
      formData.append(
        "SavePath",
        `course/banner/${this.$route.params.courseId}`
      );
      this.Course_introPicUploadToRemote(formData);
    },

执行上传图片

// 上传图片
    async Course_introPicUploadToRemote(formData) {
      const res = await this.$api.PicUploadToRemote(formData);
      if (res.success) {
        let quill = this.$refs.myQuillEditor.quill;
        // 获取光标所在位置
        let length = quill.getSelection().index;
        // 插入图片  res.info为服务器返回的图片地址
        quill.insertEmbed(length, "image", res.response);
        // 调整光标到最后
        quill.setSelection(length + 1);
      } else {
        this.$message.warning(res.msg);
      }
    },