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

Question

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

Answer 1

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

您可以尝试使用 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");

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