vue 使用VueQuillEditor 富文本 自定义上传图片并显示在富文本中

富文本中的插入图片是base64 图片太大所以需要自己上传

思路 ：请求后端接口上传图片 将返回的图片url 显示在富文本中

//使用富文本
 <quill-editor class="muquil animate__animated animate__backInUp"
                  v-model="content"
                  ref="QuillEditor"
                  :options="editorOption">
    </quill-editor>

	这里是注释 怕大家看不清拿到上面来
	this.content 是富文本的内容上面的代码已经绑定了
     判断解析  如果富文本中没内容 就插入到0的位置 
      之所以要判断是因为如果富文本中没有内容 下方的length 会报错找不到
     如果有内容就插入内容的后面 res.data.data是返回的图片地址
     插入图片insertEmbed方法的三个参数  （length 位置，   image  ， 图片url）

//上传图片方法
afterRead (file) {
      console.log(file);
      let formData = new FormData()
      formData.append('file', file.file)
      formData.append('name', file.file.name)
      this.$upimg(this.$common.upimg, formData).then(res => {
      //这里是请求成功的地方----重点在这下面....
      //这个方法是聚焦富文本 防止出现找不到富文本焦点 插入出错的问题
        this.$refs.QuillEditor.quill.focus();
        let quill = this.$refs.QuillEditor.quill
         //this.content 是富文本的内容上面的代码已经绑定了
         //判断解析  如果富文本中没内容 就插入到0的位置 
         // 之所以要判断是因为如果富文本中没有内容 下方的length 会报错找不到
         //如果有内容就插入内容的后面 res.data.data是返回的图片地址
        if (this.content == '') {
          quill.insertEmbed(0, 'image', res.data.data)
        } else {
          console.log(quill.getSelection().index)
          //length 是插入的位置
          let length = quill.getSelection().index;
          quill.insertEmbed(length, 'image', res.data.data)
          quill.setSelection(length + 1)
        }
      }).catch(err => {

      })
    },

如果有问题可以评论看到后第一时间回复