Преглед изворни кода

门店头图上传图片调ocr

zhuli пре 1 недеља
родитељ
комит
7e0a4facb6

+ 4 - 0
src/api/modules/newLoginApi.ts

@@ -69,3 +69,7 @@ export const ocrRequestUrl = params => {
 export const getAiapprovestoreInfo = params => {
   return httpLogin.post<Upload.ResFileUrl>(`/alienStore/store/info/aiApproveStoreInfo`, params);
 };
+//门店头图ocr识别
+export const getStoreOcrData = params => {
+  return httpLogin.get(`/alienStore/store/info/getStoreOcrData`, params);
+};

+ 9 - 2
src/components/Upload/Img.vue

@@ -9,7 +9,7 @@
       :show-file-list="false"
       :http-request="handleHttpUpload"
       :before-upload="beforeUpload"
-      :on-success="uploadSuccess"
+      :on-success="showSuccessNotification ? uploadSuccess : undefined"
       :on-error="uploadError"
       :drag="drag"
       :accept="fileType.join(',')"
@@ -64,6 +64,8 @@ interface UploadFileProps {
   height?: string; // 组件高度 ==> 非必传(默认为 150px)
   width?: string; // 组件宽度 ==> 非必传(默认为 150px)
   borderRadius?: string; // 组件边框圆角 ==> 非必传(默认为 8px)
+  onSuccess?: (url: string) => void;
+  showSuccessNotification?: boolean; // 是否显示上传成功通知 ==> 非必传(默认为 true)
 }
 
 // 接受父组件参数
@@ -75,7 +77,8 @@ const props = withDefaults(defineProps<UploadFileProps>(), {
   fileType: () => ["image/jpeg", "image/png", "image/gif"],
   height: "150px",
   width: "150px",
-  borderRadius: "8px"
+  borderRadius: "8px",
+  showSuccessNotification: true
 });
 
 // 生成组件唯一id
@@ -106,6 +109,10 @@ const handleHttpUpload = async (options: UploadRequestOptions) => {
     const api = props.api ?? uploadImg;
     const { data } = await api(formData);
     emit("update:imageUrl", data.fileUrl ? data.fileUrl : data[0]);
+    // 调用成功回调(如果提供了的话)
+    if (props.onSuccess) {
+      props.onSuccess(data.fileUrl ? data.fileUrl : data[0]);
+    }
     // 调用 el-form 内部的校验方法(可自动校验)
     formItemContext?.prop && formContext?.validateField([formItemContext.prop as string]);
   } catch (error) {

+ 9 - 2
src/components/Upload/Imgs.vue

@@ -11,7 +11,7 @@
       :http-request="handleHttpUpload"
       :before-upload="beforeUpload"
       :on-exceed="handleExceed"
-      :on-success="uploadSuccess"
+      :on-success="showSuccessNotification ? uploadSuccess : undefined"
       :on-error="uploadError"
       :drag="drag"
       :accept="fileType.join(',')"
@@ -71,6 +71,8 @@ interface UploadFileProps {
   height?: string; // 组件高度 ==> 非必传(默认为 150px)
   width?: string; // 组件宽度 ==> 非必传(默认为 150px)
   borderRadius?: string; // 组件边框圆角 ==> 非必传(默认为 8px)
+  onSuccess?: (url: string) => void;
+  showSuccessNotification?: boolean; // 是否显示上传成功通知 ==> 非必传(默认为 true)
 }
 
 const props = withDefaults(defineProps<UploadFileProps>(), {
@@ -82,7 +84,8 @@ const props = withDefaults(defineProps<UploadFileProps>(), {
   fileType: () => ["image/jpeg", "image/png", "image/gif"],
   height: "150px",
   width: "150px",
-  borderRadius: "8px"
+  borderRadius: "8px",
+  showSuccessNotification: true
 });
 
 // 获取 el-form 组件上下文
@@ -152,6 +155,10 @@ const handleHttpUpload = async (options: UploadRequestOptions) => {
   try {
     const api = props.api ?? uploadImg;
     const { data } = await api(formData);
+    // 调用成功回调(如果提供了的话)
+    if (props.onSuccess) {
+      props.onSuccess(data.fileUrl ? data.fileUrl : data[0]);
+    }
     options.onSuccess(data);
   } catch (error) {
     // 上传失败,移除文件 UID

+ 49 - 1
src/views/storeDecoration/storeHeadMap/index.vue

@@ -92,6 +92,8 @@
               :file-type="['image/jpeg', 'image/png', 'image/gif', 'image/webp']"
               :border-radius="'8px'"
               :api="singleImageUploadApi"
+              :on-success="handleStoreOcrAfterUpload"
+              :show-success-notification="false"
             >
               <template #tip>
                 <div class="upload-tip">上传图片 ({{ formData.singleImage ? "1" : "0" }}/1)</div>
@@ -113,6 +115,8 @@
                 :height="'112px'"
                 :border-radius="'8px'"
                 :api="multipleImageUploadApi"
+                :on-success="handleStoreOcrAfterUploadMore"
+                :show-success-notification="false"
               >
                 <template #tip>
                   <div class="upload-tip">上传图片 ({{ formData.multipleImages.length }}/6)</div>
@@ -140,7 +144,7 @@ import { ArrowRight } from "@element-plus/icons-vue";
 import Sortable from "sortablejs";
 import UploadImg from "@/components/Upload/Img.vue";
 import UploadImgs from "@/components/Upload/Imgs.vue";
-import { uploadImg } from "@/api/modules/newLoginApi";
+import { uploadImg, getStoreOcrData } from "@/api/modules/newLoginApi";
 import { getStoreHeadImg, saveStoreHeadImg } from "@/api/modules/storeDecoration";
 import { localGet } from "@/utils";
 
@@ -148,6 +152,50 @@ const loading = ref(false);
 const singleFormRef = ref<FormInstance>();
 const multipleFormRef = ref<FormInstance>();
 const sortableInstance = ref<Sortable | null>(null);
+const handleStoreOcrAfterUploadMore = async (imageUrl: string) => {
+  try {
+    await handleStoreOcr({ imageUrl });
+  } catch (error) {
+    // OCR识别失败,移除已上传的图片
+    formData.multipleImages = formData.multipleImages.filter(item => item.url !== imageUrl);
+    throw error;
+  }
+};
+const handleStoreOcrAfterUpload = async (imageUrl: string) => {
+  try {
+    await handleStoreOcr({ imageUrl });
+  } catch (error) {
+    // OCR识别失败,清除已上传的图片
+    formData.singleImage = "";
+    throw error;
+  }
+};
+
+const handleStoreOcr = async (params: { imageUrl: string }) => {
+  try {
+    const res: any = await getStoreOcrData({ imageUrl: params.imageUrl, storeUserId: localGet("geeker-user")?.userInfo.storeId });
+    if (res && (res.code === 200 || res.code === "200") && res.data) {
+      ElNotification({
+        title: "OCR识别成功",
+        message: `识别结果: ${res.data.recognizedText || "无"}`,
+        type: "success",
+        duration: 5000
+      });
+    } else {
+      // 业务逻辑错误,只在这里显示错误消息
+      const errorMsg = res?.msg || "未查询到OCR识别数据";
+      ElMessage.error(errorMsg);
+      const error = new Error(errorMsg);
+      (error as any).handled = true; // 标记错误已被处理
+      throw error;
+    }
+  } catch (error: any) {
+    // 网络错误或其他异常,只在这里显示错误消息
+    if (!error.handled) {
+    }
+    throw error;
+  }
+};
 
 // 模式:single 单图模式,multiple 多图模式
 const mode = ref<"single" | "multiple">("single");