quill原生富文本编辑器处理复制粘贴本地图片base64内存问题

富文本编辑器直接复制本地图片时，会自动转译成base64格式，这种格式很占本地内存搞个十几张图片，就提示报错：cache.js:7 Uncaught (in promise) QuotaExceededError: Failed to execute 'setI

原因是内存已超过限制的5.5mb 那为了解决这个问题，我们需要图片粘贴的同时，先将图片上传，得到一个服务端绝对路径，将此路径替换base64 ,以此解决 内存问题。

mounted(){
      let editorDom = this.$el.querySelector(`.${this.className}`);
      // 初始化编辑器
      this.editor = new Quill(editorDom, this.options);
       // 监听粘贴事件
       this.editor.root.addEventListener("paste", async (e) => {
        if (!e.clipboardData?.items) return;
        let htmlContent;
        for (let i = 0; i < e.clipboardData.items.length; i++) {
          const item = e.clipboardData.items[i];
          // 2. 处理图片
          if (item.type.includes("image")) {
            const file = item.getAsFile();
            if (file) {
              let content = {
                file: file,
                data: { type: "image", xtype: "ysb_product", editor: true },
              };
              // 你的上传图片逻辑
              const { data } = await uploadImg(content);
              // 获取编辑器内容 此时还是 base64
              htmlContent = this.editor.root.innerHTML;
              if (htmlContent) {
              // 阻止默认事件
                e.preventDefault();
                // 将内容转还html虚拟dom 
                let delta = this.editor.clipboard.convert({
                  html: htmlContent,
                });
                 // 替换src为 base64 的路径
                delta.ops.map((el) => {
                  if (el.insert.image && el.insert.image.includes("base64")) {
                    el.insert.image = data.url;
                  }
                });
                // 重新赋值
                this.editor.setContents(delta);
              }
            }
          }
        }
      });
},

此时我们就解决了复制图片内存过大的问题。