quill-editor结合el-upload自定义上传图片记录

借用el-upload完成上传操作，隐藏此元素

元素部分代码

<div style="display: none">
            <el-upload
              class="avatar-uploader"
              action="#"
              ref="upload"
              :on-preview="handlePreview"
              :before-upload="beforeAvatarUpload"
              :http-request="uploadImage"
              :on-remove="handleRemove"
              :before-remove="beforeRemove"
              multiple
              :limit="1"
              :on-exceed="handleExceed"
              :file-list="fileList"
            >
              <el-button size="small" type="primary"></el-button>
            </el-upload>
          </div>
          <div class="quill_content">
            <quill-editor
              v-model="validateForm.content"
              ref="myQuillEditor"
              :options="editorOption"
              @blur="onEditorBlur($event)"
              @focus="onEditorFocus($event)"
              @change="onEditorChange($event)"
            >
            </quill-editor>
          </div>

配置代码

    editorOption: {
        placeholder: "请编辑内容",
        extension: "",
        modules: {
          toolbar: {
            container: [
              ["bold", "italic", "underline", "strike"],
              ["blockquote", "code-block"],
              [{ list: "ordered" }, { list: "bullet" }],
              [{ script: "sub" }, { script: "super" }],
              [{ indent: "-1" }, { indent: "+1" }],
              [{ size: ["small", false, "large", "huge"] }],
              [{ font: [] }],
              [{ color: [] }, { background: [] }],
              [{ align: [] }],
              ["image"],
            ],
            handlers: {
              image: function (value) {
                if (value) {
                  // upload点击上传事件
                  document.querySelector(".avatar-uploader input").click();
                } else {
                  this.quill.format("image", false);
                }
              },
            },
          },
        },
      },

逻辑部分代码

handleRemove(file, fileList) {},
handlePreview(file) {},
handleExceed(files, fileList) {},
beforeRemove(file, fileList) {},
onEditorChange() {
      this.$refs.validateForm.validateField("content");
},
beforeAvatarUpload(file) {
      this.fileName = file.name;
      this.loading = true;
      const extension = file.name.substring(file.name.lastIndexOf(".") + 1);
      this.extension = extension;
      const supportExtension = ["jpg", "jpeg", "png"];
      const isLt5M = file.size / 1024 / 1024 < 5;
      this.fileList = [];
      this.percent = 0;

      if (supportExtension.indexOf(extension) == -1) {
        this.$message({
          type: "warning",
          message: `上传文件只能是jpg/png格式!`,
        });
        this.loading = false;
        return false;
      }
      if (!isLt5M) {
        this.$message({
          type: "warning",
          message: `上传文件大小不能超过 5MB!`,
        });
        this.loading = false;
        return false;
      }

      this.fileList.push(file);
      // this.$refs.userValidateForm.validateField('file');
      return true;
 },
 uploadImage(fileInfo) {
      // 开始上传操作
      this.upload(fileInfo);
    },
 upload(fileInfo) {
      // 上传接口操作
      const formData = new FormData();
      formData.append("file", fileInfo.file);
      services
        .uploadImg(formData)
        .then((res) => {
          this.uploadSuccess(res.url);
          this.fileList = [];
          this.loading = false;
          this.$message.success("上传成功！");
        })
        .catch((err) => {
          this.$message.error(err);
          this.fileList = [];
        });
    },
uploadSuccess(res) {
      // 上传成功对quill-editor逻辑
      var dt = res;
      let quill = this.$refs.myQuillEditor.quill;
      // 如果上传成功
      if (dt) {
        // 获取光标所在位置
        let length = quill.getSelection().index;
        // 插入图片  dt.url为服务器返回的图片地址
        quill.insertEmbed(length, "image", dt);
        // 调整光标到最后
        quill.setSelection(length + 1);
      } else {
        this.$message.error("图片插入失败");
      }
      // loading加载隐藏
      this.quillUpdateImg = false;
    },