Quill富文本 图片上传服务器、复制粘贴图片上传

引入：

import { ImageExtend, QuillWatch } from "quill-image-extend-module";
Quill.register("modules/ImageExtend", ImageExtend);

一、上传图片到服务器

1、options配置modules

// 处理点击工具栏图片按钮，上传图片base64位转换成服务器图片url
          ImageExtend: {
            loading: true, // 可选参数 是否显示上传进度和提示语
            name: "file", //后台上传接口的参数名
            action: process.env.VUE_APP_BASE_API + "/file/Ali/upload", // 上传的图片服务器地址
            // size: 2, // 可选参数 图片大小，单位为M
            response: (res) => {
              return res.data.url;
            },
            headers: (xhr) => {
              xhr.setRequestHeader("Authorization", "Bearer " + getToken());
            },
            // sizeError: () => {
            //   return this.$message.error("图片大小超过2M！");
            // }
          },

2、options配置toolbar

handlers: {
              image: function (value) {
                // 劫持原来的图片点击按钮事件
                QuillWatch.emit(this.quill.id);
              },
            },

二、复制粘贴图片上传到服务器

1、初始化

this.$refs.editor.addEventListener('paste', this.handlePaste);

2、复制

handlePaste(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);//后台上传接口的参数名
            // 实现上传
            $.ajax({
              type: "post",
              url: process.env.VUE_APP_BASE_API + "/file/Ali/upload", // 上传的图片服务器地址
              data: formData,
              headers:{'Authorization': "Bearer " + getToken()},//必须
              dataType: "json",
              processData: false,
              contentType: false,//设置文件上传的type值，必须
              success: (response) => {
                if (response.code == 200) {
                  //当编辑器中没有输入文本时，这里获取到的 range 为 null
                  var range = this.Quill.selection.savedRange;
                  //图片插入在富文本中的位置
                  var index = 0;
                  if (range == null) {
                    index = 0;
                  } else {
                    index = range.index;
                  }
                  //将图片链接插入到当前的富文本当中
                  this.Quill.insertEmbed(index, "image", response.data.url);
                  // 调整光标到最后
                  this.Quill.setSelection(index + 1); //光标后移一位
                }
              },
              error: function () {
                this.$message.error('上传失败！')
              },
            });
          });
        }
    },