vue中如何使用vue-quill-editor解决图片上传七牛云

html部分

   <el-upload class="avatar-uploader quill-img"
               :action="uploadImgUrl"
               name="file"
               :data="qiniu"
               :headers="headers"
               :show-file-list="false"
               :on-success="quillImgSuccess"
               :on-error="uploadError"
               :before-upload="quillImgBefore"
               accept='.jpg,.jpeg,.png,.gif'></el-upload>

    <!-- 富文本组件 -->
    <!-- @blur="onEditorBlur($event)"
                  @focus="onEditorFocus($event)" -->
    <quill-editor class="editor"
                  v-model="content"
                  ref="quillEditor"
                  :options="editorOption"
                  @change="onEditorChange($event)"
                  @ready="ready($event)"></quill-editor>
  </div>

js部分

  import {getToken} from '@/utils/auth'
  import {getUpLoadToken} from '@/utils/upload.js'
  import {quillEditor} from 'vue-quill-editor'
  import Quill from 'quill'
  import 'quill/dist/quill.core.css'
  import 'quill/dist/quill.snow.css'
  import 'quill/dist/quill.bubble.css'
  import {lineHeightStyle} from '@/utils/lineHeight'
  // 字体设置
  const fontSizeStyle = Quill.import('attributors/style/size') // 引入这个后会把样式写在style上
  fontSizeStyle.whitelist = ['12px', '14px', '16px', '18px', '20px', '24px', '28px', '36px', '48px', '72px']
  Quill.register(fontSizeStyle, true)
  // 设置字体样式
  const Font = Quill.import('attributors/style/font') // 引入这个后会把样式写在style上
  const fonts = ['SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong']
  Font.whitelist = fonts // 将字体加入到白名单
  Quill.register(Font, true)
  export default {
    props: {
      /* 编辑器的内容 */
      value: {
        type: String,
        default: '',
      },
      /* 高度 */
      height: {
        type: Number,
        default: null,
      },
      /* 最小高度 */
      minHeight: {
        type: Number,
        default: null,
      },
      /* 只读 */
      readOnly: {
        type: Boolean,
        default: false,
      },
      // 上传文件大小限制(MB)
      fileSize: {
        type: Number,
        default: 5,
      },
      /* 类型（base64格式、url格式） */
      type: {
        type: String,
        default: 'url',
      },
      /* 图片大小 */
      maxSize: {
        type: Number,
        default: 4000, //kb
      },
    },
    components: {quillEditor},
    data() {
      return {
        qiniu: {
          token:
            '获取的七牛云token',
          qiniu_url: // 七牛云的上传地址
          upload_qiniu_addr:  // 七牛云的储存位置
        },
        content: this.value,
        editorOption: {
          placeholder: '',
          theme: 'snow', // or 'bubble'
          placeholder: '请输入内容',
          modules: {
            toolbar: {
              container: [
                ['bold', 'italic', 'underline', 'strike'], //加粗，斜体，下划线，删除线
                ['blockquote', 'code-block'], //引用，代码块
                [{header: 1}, {header: 2}], // 标题，键值对的形式；1、2表示字体大小
                [{list: 'ordered'}, {list: 'bullet'}], //列表
                [{script: 'sub'}, {script: 'super'}], // 上下标
                [{indent: '-1'}, {indent: '+1'}], // 缩进
                [{direction: 'rtl'}], // 文本方向
                [{size: fontSizeStyle.whitelist}], // 字体大小
                [{lineheight: ['1', '1.5', '1.8', '2', '3', '4', '5']}], // 对齐方式
                [{header: [1, 2, 3, 4, 5, 6, false]}], //几级标题
                [{color: []}, {background: []}], // 字体颜色，字体背景颜色
                [{font: fonts}], //字体
                [{align: []}], //对齐方式
                ['clean'], //清除字体样式
                ['image', 'video'], //上传图片、上传视频
              ],
              handlers: {
                lineheight: (value) => {
                  if (value) {
                    let quill = this.$refs.quillEditor.quill
                    quill.format('lineHeight', value)
                  }
                },
                // 调用image上传事件（注意）
                image: (value) => {
                  if (value) {
                    document.querySelector('.avatar-uploader input').click()
                  } else {
                    this.quill.format('image', false)
                  }
                },
              },
            },
            history: {
              delay: 1000,
              maxStack: 50,
              userOnly: false,
            },
          },
        },
        uploadImgUrl:  // 上传的图片服务器地址
        headers: {
          Authorization: 'Bearer ' + getToken(),
        },
      }
    },
    watch: {
        // 监听内容
      value: function () {
        this.content = this.value
      },
    },
    methods: {
      UpLoadToken() {
        //   请求七牛云的token
        getUpLoadToken()
          .then((res) => {
            if (res.code == 200) {
              this.token = res.data
            } else {
              console.log('errr-token')
            }
          })
          .catch((err) => {
            console.log(err)
          })
      },
      onEditorBlur() {
        //失去焦点事件
      },
      onEditorFocus() {
        //获得焦点事件
      },
      onEditorChange() {
        //内容改变事件
        this.$emit('input', this.content)
      },
      ready() {
        //   写入自定义行距
        Quill.register({'formats/lineHeight': lineHeightStyle}, true)
      },
      // 富文本图片上传前
      quillImgBefore(file) {
        let fileType = file.type
        if (fileType === 'image/jpeg' || fileType === 'image/png') {
          return true
        } else {
          this.$message.error('请插入图片类型文件(jpg/jpeg/png)')
          return false
        }
      },

      quillImgSuccess(res, file) {
        console.log(res, 'res')
        // res为图片服务器返回的数据
        // 获取富文本组件实例
        let quill = this.$refs.quillEditor.quill
        // 如果上传成功
        if (res.hash) {//判断返回结果是否存在hash
          // 获取光标所在位置
          let length = quill.getSelection().index
          // 插入图片  res.url为服务器返回的图片地址
          quill.insertEmbed(length, 'image', '拼接链接地址' + res.hash)
          // 调整光标到最后
          quill.setSelection(length + 1)
        } else {
          this.$message.error('图片插入失败')
        }
      },
      // 富文本图片上传失败
      uploadError() {
        // loading动画消失
        this.$message.error('图片插入失败')
      },
    },
  }

css部分

  .editor {
    line-height: normal !important;
    /* height: 192px; */
  }
  .quill-img {
    display: none;
  }
  .ql-snow .ql-tooltip[data-mode='link']::before {
    content: '请输入链接地址:';
  }
  .ql-snow .ql-tooltip.ql-editing a.ql-action::after {
    border-right: 0px;
    content: '保存';
    padding-right: 0px;
  }

  .ql-snow .ql-tooltip[data-mode='video']::before {
    content: '请输入视频地址:';
  }

  .ql-snow .ql-picker.ql-size .ql-picker-label::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item::before {
    content: '14px';
  }
  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='small']::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='small']::before {
    content: '10px';
  }
  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='large']::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='large']::before {
    content: '18px';
  }
  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='huge']::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='huge']::before {
    content: '32px';
  }

  .ql-snow .ql-picker.ql-header .ql-picker-label::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item::before {
    content: '文本';
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value='1']::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='1']::before {
    content: '标题1';
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value='2']::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='2']::before {
    content: '标题2';
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value='3']::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='3']::before {
    content: '标题3';
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value='4']::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='4']::before {
    content: '标题4';
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value='5']::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='5']::before {
    content: '标题5';
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value='6']::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='6']::before {
    content: '标题6';
  }

  .ql-snow .ql-picker.ql-font .ql-picker-label::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item::before {
    content: '标准字体';
  }
  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value='serif']::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item[data-value='serif']::before {
    content: '衬线字体';
  }
  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value='monospace']::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item[data-value='monospace']::before {
    content: '等宽字体';
  }
  .ql-snow .ql-picker.ql-lineheight .ql-picker-label::before {
    content: '行高';
  }
  .ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='1']::before {
    content: '1';
  }
  .ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='1.5']::before {
    content: '1.5';
  }
  .ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='1.8']::before {
    content: '1.8';
  }
  .ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='2']::before {
    content: '2';
  }
  .ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='3']::before {
    content: '3';
  }
  .ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='4']::before {
    content: '4';
  }
  .ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='5']::before {
    content: '5';
  }
  .ql-snow .ql-picker.ql-lineheight {
    width: 70px;
  }
  .ql-snow {
    /* //  字号 */
    .ql-picker.ql-size {
      .ql-picker-label[data-value='12px']::before,
      .ql-picker-item[data-value='12px']::before {
        content: '12px';
      }
      .ql-picker-label[data-value='14px']::before,
      .ql-picker-item[data-value='14px']::before {
        content: '14px';
      }
      .ql-picker-label[data-value='16px']::before,
      .ql-picker-item[data-value='16px']::before {
        content: '16px';
      }
      .ql-picker-label[data-value='18px']::before,
      .ql-picker-item[data-value='18px']::before {
        content: '18px';
      }
      .ql-picker-label[data-value='20px']::before,
      .ql-picker-item[data-value='20px']::before {
        content: '20px';
      }
      .ql-picker-label[data-value='24px']::before,
      .ql-picker-item[data-value='24px']::before {
        content: '24px';
      }
      .ql-picker-label[data-value='28px']::before,
      .ql-picker-item[data-value='28px']::before {
        content: '28px';
      }
      .ql-picker-label[data-value='36px']::before,
      .ql-picker-item[data-value='36px']::before {
        content: '36px';
      }
      .ql-picker-label[data-value='48px']::before,
      .ql-picker-item[data-value='48px']::before {
        content: '48px';
      }
      .ql-picker-label[data-value='72px']::before,
      .ql-picker-item[data-value='72px']::before {
        content: '72px';
      }
    }
    /* // font字体 */
    .ql-picker.ql-font {
      .ql-picker-label[data-value='SimSun']::before,
      .ql-picker-item[data-value='SimSun']::before {
        content: '宋体';
        font-family: 'SimSun' !important;
      }
      .ql-picker-label[data-value='SimHei']::before,
      .ql-picker-item[data-value='SimHei']::before {
        content: '黑体';
        font-family: 'SimHei';
      }
      .ql-picker-label[data-value='Microsoft-YaHei']::before,
      .ql-picker-item[data-value='Microsoft-YaHei']::before {
        content: '微软雅黑';
        font-family: 'Microsoft YaHei';
      }
      .ql-picker-label[data-value='KaiTi']::before,
      .ql-picker-item[data-value='KaiTi']::before {
        content: '楷体';
        font-family: 'KaiTi' !important;
      }
      .ql-picker-label[data-value='FangSong']::before,
      .ql-picker-item[data-value='FangSong']::before {
        content: '仿宋';
        font-family: 'FangSong';
      }
    }
  }