From 8810926fd14c0f2ade72a213c37f6845bd36e718 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A7=8B=E4=BA=8E=E5=88=9D=E8=A7=81?= <752204717@qq.com> Date: Thu, 1 Aug 2024 10:52:51 +0800 Subject: [PATCH] =?UTF-8?q?=E5=9B=BE=E7=89=87=E4=B8=8A=E4=BC=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/modules/shop/curriculum.vue | 152 +++++++++++++++++++++++++- 1 file changed, 148 insertions(+), 4 deletions(-) diff --git a/src/views/modules/shop/curriculum.vue b/src/views/modules/shop/curriculum.vue index 92aef36..133d833 100644 --- a/src/views/modules/shop/curriculum.vue +++ b/src/views/modules/shop/curriculum.vue @@ -179,6 +179,10 @@ > import { quillEditor } from "vue-quill-editor"; import global from "../../common/common.vue"; //引入共用组间 - +import axios from "axios"; import "quill/dist/quill.core.css"; import "quill/dist/quill.snow.css"; import "quill/dist/quill.bubble.css"; @@ -238,6 +242,8 @@ const toolbarOptions = [ export default { data() { return { + quillEditorIndex: 0, + uploadLoading: false, pointMemery: [], // 花生币操作记录 baseUrl: global.baseUrl, goodsTypeList: [], @@ -359,11 +365,16 @@ export default { maxStack: 50, userOnly: false }, + clipboard: { + matchers: [["img", this.handlePasteImg]] + }, toolbar: { container: toolbarOptions, handlers: { image: function(value) { + console.log("value at line 365:", value); if (value) { + this.uploadLoading = true; // 调用element的图片上传组件 document.querySelector(".avatar-uploader input").click(); } else { @@ -383,18 +394,148 @@ export default { this.getTags(); }, methods: { + handlePasteImg(node, delta) { + this.uploadLoading = true; + var that = this; + let ops = []; + delta.ops.forEach(async (op, index) => { + if (op.insert && typeof op.insert !== "string") { + // 如果粘贴了图片，这里会是一个对象 + if (op.insert.image) { + if (op.insert.image.includes(";base64")) { + let file = that.dataURLtoFile( + op.insert.image, + `paste-${Math.random() + .toString(36) + .slice(-8)}.jpg` + ); + console.log("file at line 397:", file); + // key 值可以自己用当前日期生成 + let key = `detail/${new Date().getTime()}${Math.random() + .toString(36) + .slice(-8)}.jpg`; + let formdata = new FormData(); + formdata.append("file", file); + formdata.append("fileName", key); + formdata.append("key", key); + console.log("🚀 ~ handleRequest ~ formdata:", formdata); + + axios + .post(this.baseUrl + "/oss/fileoss", formdata) + .then(res => { + console.log("🚀 ~ this.$axios.post ~ res111:", res); + if (res.data.code == 0) { + // 如果上传成功 + if (res.data.url) { + // 获取光标所在位置 + var quill = that.$refs.myQuillEditor.quill; + var length = this.quillEditorIndex; + + console.log("length at line 397:", length); + + // 插入图片，res为服务器返回的图片链接地址 + quill.insertEmbed(length, "image", res.data.url); + // 调整光标到最后 + quill.setSelection(length + 1); + this.uploadLoading = false; + } else { + // 提示信息，需引入Message + this.$message.error("图片插入失败！"); + this.uploadLoading = false; + } + } else { + this.$message.error("图片插入失败！"); + this.uploadLoading = false; + } + }) + .catch(err => { + this.$message.error("图片插入失败！"); + this.uploadLoading = false; + console.log(err); + }); + + // const [res, err] = await apiService.getUploadToken(); + // if (err) return false; + + // let origin = res.data.picture.origin; + // const fd = new FormData(); + // fd.append("key", key); + // fd.append("token", res.data.picture.token); + // fd.append("origin", origin); + // fd.append("time", new Date().getTime()); + // fd.append("file", file); + // apiService + // .uploadImage(fd) + // .then(res => { + // console.log(res, "res"); + // let quill = this.$refs.myQuillEditor.quill; // 获取富文本对象 + // let length = quill.getSelection().index; // 获取编辑器光标位置 + // quill.insertEmbed(length, "image", `${origin}/${res.key}`); // 插入图片 图片地址 + // quill.setSelection(length + 1); // 光标后移一位 调整光标到最后 + // }) + // .catch(err => { + // console.log(err); + // }); + } + } + } + }); + delta.ops = ops; // 不加会报错 + return delta; + }, + dataURLtoFile(dataurl, name) { + let arr = dataurl.split(","); + let mime = arr[0].match(/:(.*?);/)[1]; + let bstr = atob(arr[1]); + let n = bstr.length; + let u8arr = new Uint8Array(n); + while (n--) { + u8arr[n] = bstr.charCodeAt(n); + } + return new File([u8arr], name, { type: mime }); + }, + // 提取富文本中image中的src + extractImageSrc(htmlString) { + let imgSrcArray = []; + let imgTagRegex = /]+src=['"]([^'"]+)['"][^>]*>/g; + let match; + + while ((match = imgTagRegex.exec(htmlString)) !== null) { + let src = match[1]; + imgSrcArray.push(src); + } + return imgSrcArray; + }, + // ocr识别 + async handleImageOCR() { + if (!this.quillContent) { + this.$Message.error("请上传图片！"); + return false; + } + let imageList = this.extractImageSrc(this.quillContent); + if (Array.isArray(imageList) && imageList.length) { + const [res, err] = await service.ocrResult(imageList); + if (err) return; + if (res.ok && res.data) { + this.ocrDescribe = res.data; + } + } + }, + contentUploadSuccess(res, file) { // console.log(res) let quill = this.$refs.myQuillEditor.quill; // 如果上传成功 if (res) { // 获取光标所在位置 - let length = quill.getSelection().index; + let length = this.quillEditorIndex; // 插入图片，res为服务器返回的图片链接地址 quill.insertEmbed(length, "image", res.url); // 调整光标到最后 quill.setSelection(length + 1); + this.uploadLoading = false; } else { + this.uploadLoading = false; // 提示信息，需引入Message this.$message.error("图片插入失败！"); } @@ -443,7 +584,6 @@ export default { } }) - .then(res => { console.log("result at line 452:", res); if (res && res.data.code === 0) { @@ -551,7 +691,7 @@ export default { data: { ...this.dataForm, product_details: this.dataForm.productDetails, - activityPrice: this.dataForm.hDprice, + activityPrice: this.dataForm.hDprice }, header: { //默认 无 说明：请求头 @@ -696,10 +836,14 @@ export default { }, // 失去焦点事件 onEditorBlur(quill) { + // console.log(".index at line 841:", quill.getSelection().index); // console.log('editor blur!', quill) }, // 获得焦点事件 onEditorFocus(quill) { + var index = quill.getSelection().index; + this.quillEditorIndex = index; + console.log("quill at line 839:", this.quillEditorIndex); //console.log('editor focus!', quill) }, // 准备富文本编辑器