富文本编辑器使用图片上传后存储url功能

           <div v-show='false'>
              <el-upload class="avatar-uploader"
                         action=""
                         accept="image/png,image/jpg,image/jpeg"
                         :show-file-list="false"
                         :http-request='uploadImgInQuill'
                         :before-upload="beforethumbnail"
                         auto-upload>
                <i class="el-icon-plus"
                   id="uploadImg"></i>
              </el-upload>
            </div>
            <div class="edit_container"
                 style="margin-top: 10px;">
              <quill-editor v-model="addForm.useExplain"
                            :options="editorOption"
                            ref="myQuillEditor"
                            @blur="onEditorBlur($event)"
                            @focus="onEditorFocus($event)"
                            @change="onEditorChange($event)"></quill-editor>
            </div>
<script>
// 富文本工具栏配置
const toolbarOptions = [
  ["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: ["small", false, "large", "huge"] }], // 字体大小
  [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
  [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
  [{ font: [] }], // 字体种类
  [{ align: [] }], // 对齐方式
  ["clean"], // 清除文本格式
  ["image"] // 链接、图片、视频
];
export default {
  name: "addArticle",
  data () {
      // 富文本编辑器选项
      editorOption: {
        theme: "snow", // or 'bubble'
        placeholder: "请输入内容",
        modules: {
          toolbar: {
            container: toolbarOptions,
            // container: "#toolbar",
            handlers: {
              image: function (value) {
                console.log(value);
                if (value) {
                  // 触发input框选择图片文件
                  document.querySelector("#uploadImg").click();
                } else {
                  this.quill.format("image", false);
                }
              }
            }
          }
        }
      },
      // 上传图片状态
      uploadState: true,
  }
methods: {
// 图片上传显示
    beforethumbnail (file) { // 图片上传前
      this.uploadState = true;
      if (file.type != "image/png") {
        this.$message.error('上传图片格式应为:png');
        this.uploadState = false;
        return false;
      }
      if (file.size / 1024 / 1024 > 10) {
        this.$message.error('上传图片不能大于10M')
        this.uploadState = false;
        return false;
      }
    },
// 商品详情插入前校验
    beforeDetailUpload (file) {
      console.log("before");
      return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function () {
          // 图片转base64完成后返回reader对象
          //this.smallbase64 = reader.result;
          resolve(reader.result);
        };
      });
    },
    // 商品详情插入图片
    async uploadImgInQuill (file) { // 文章中上传图片返回URL
      if (this.uploadState) {
        let imgInQuill = await this.beforeDetailUpload(file.file);
        let parames = {
          functionName: "productbiz.service.puhui.integralMall.IntegralMallService",
          methodName: "saveGoodsSmallImage",
          data: {
            file: imgInQuill
          }
        };
        this.http(JSON.stringify(parames))
          .then(res => {
            if (res.data.status === 1) {
              this.$message({
                type: "success",
                message: "上传成功!"
              });
              this.insertImgUrl(res.data.smallImage)
            }
          })
          .catch(res => { });
      }
    },
    // 插入图片
    insertImgUrl (res) {
      let quill = this.$refs.myQuillEditor.quill;
      console.log("editer :", quill.getSelection());
      if (quill.getSelection()) {
        let length = quill.getSelection().index;
        // 插入图片，res为服务器返回的图片链接地址
        quill.insertEmbed(
          length,
          "image",
          res
        );
        // 调整光标到最后
        quill.setSelection(length + 1);
      } else {
        quill.insertEmbed(
          "0",
          "image",
          res
        );
        // 调整光标到最后
        quill.setSelection(length + 1);
      }
    },
}
</script>