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

vue-quill-editor编辑器 图片粘贴是空的
- 写回答
- 好问题 0 提建议
- 关注问题
- 邀请回答
-
2条回答 默认 最新
- 快撑死的鱼 2023-02-12 19:27关注
回答不易,求求您采纳哦 感激不尽
您可以尝试使用 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");
希望这些代码示例能帮到您。
本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏 举报 编辑记录