vue-quill-editor 结合秀米,秀米里面图片粘贴时需要做一个上传的功能,
遇到的问题是 图片粘贴过来,拿不到是个空的。
代码如下: listenPaste方法模板挂载后执行的,打印出来的files里面是空的,
请教下还有别的方法上传嘛,例如我截取到图片的地址上传
回答不易,求求您采纳哦 感激不尽
您可以尝试使用 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");
希望这些代码示例能帮到您。