vue-quill-editor编辑器 图片粘贴是空的

vue-quill-editor 结合秀米,秀米里面图片粘贴时需要做一个上传的功能,
遇到的问题是 图片粘贴过来,拿不到是个空的。
代码如下: listenPaste方法模板挂载后执行的,打印出来的files里面是空的,
请教下还有别的方法上传嘛,例如我截取到图片的地址上传

img

img

回答不易,求求您采纳哦 感激不尽

您可以尝试使用 FileReader API 实现图片的读取,代码示例如下:

listenPaste(e) {
  // 获取粘贴的图片
  let items = e.clipboardData.items;
  let images = [];
  for (let i = 0; i < items.length; i++) {
    if (items[i].type.indexOf("image") !== -1) {
      images.push(items[i].getAsFile());
    }
  }

  // 图片读取
  for (let i = 0; i < images.length; i++) {
    let reader = new FileReader();
    reader.readAsDataURL(images[i]);
    reader.onload = e => {
      // 获取读取到的图片数据
      let imageData = e.target.result;
      // 在这里上传图片,可以使用 axios 等请求库
    };
  }
},


如果上传成功,就可以在编辑器中插入图片,代码示例如下:


// 在图片上传成功的回调中插入图片
this.$refs.quillEditor.quill.insertEmbed(index, "image", imageData, "user");

另外,如果您想要截取图片的地址上传,您可以通过正则表达式提取图片的地址,然后进行上传。代码示例如下:

listenPaste(e) {
  let paste = e.clipboardData.getData("text");
  // 正则表达式提取图片的地址
  let imgReg = /<img.*?(?:>|\/>)/gi;
  let arr = paste.match(imgReg);
  for (let i = 0; i < arr.length; i++) {
    // 提取 src 地址
    let src = arr[i].match(/src=[\'\"]?([^\'\"]*)[\'\"]?/i)[1];
    // 在这里上传图片,可以使用 axios 等请求库
  }
},


如果上传成功,您可以在编辑器中插入图片,代码示例如下:

// 在图片上传成功的回调中插入图片
this.$refs.quillEditor.quill.insertEmbed(index, "image", src, "user");


希望这些代码示例能帮到您。