图片上传

src/views/modules/shop/curriculum.vue

@@ -179,6 +179,10 @@
         >
         </el-upload>
         <quill-editor
+          v-loading="uploadLoading"
+          element-loading-text="拼命加载中"
+          element-loading-spinner="el-icon-loading"
+          element-loading-background="rgba(0, 0, 0, 0.8)"
           v-model="dataForm.productDetails"
           ref="myQuillEditor"
           :options="editorOption"
@@ -203,7 +207,7 @@
 <script>
 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 = /<img[^>]+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)
     },
     // 准备富文本编辑器