富文本編輯器使用圖片上傳後存儲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>