富文本编辑vue-quill-editor上传图片

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

1. 安装依赖包

npm install vue-quill-editor –save

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

2.原本quill中的图片按钮会将图片附件默认转成base64;这样是不行的.所以我们需要转换。

4.组件中使用

import { container, ImageExtend } from "quill-image-extend-module";

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);
    });
}