compress image

src/pages/home/index.vue

@@ -628,7 +628,60 @@ function resetMarriageInfo() {
 const handleScanClick = () => {
   ocrUploadId.value?.click()
 }
-const handleImageChange = () => {
+const MAX_UPLOAD_KB = 500;
+
+const compressImage = (file: File, maxSizeKB = MAX_UPLOAD_KB): Promise<File> => {
+  const limit = maxSizeKB * 1024;
+  if (file.size <= limit) return Promise.resolve(file);
+
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+      const img = new Image();
+      img.onload = async () => {
+        const tryCompress = async (scale: number) => {
+          const canvas = document.createElement('canvas');
+          canvas.width = Math.max(1, Math.round(img.width * scale));
+          canvas.height = Math.max(1, Math.round(img.height * scale));
+          const ctx = canvas.getContext('2d');
+          if (!ctx) throw new Error('无法获取画布上下文');
+          ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+
+          let quality = 0.9;
+          let dataUrl = canvas.toDataURL(file.type || 'image/jpeg', quality);
+          while (dataUrl.length / 1024 > maxSizeKB && quality > 0.4) {
+            quality -= 0.1;
+            dataUrl = canvas.toDataURL(file.type || 'image/jpeg', quality);
+          }
+          const blob = await fetch(dataUrl).then(res => res.blob());
+          return blob;
+        };
+
+        try {
+          let scale = Math.min(1, Math.sqrt(limit / file.size));
+          for (let attempt = 0; attempt < 3; attempt++) {
+            const blob = await tryCompress(scale);
+            if (blob.size <= limit) {
+              resolve(new File([blob], file.name, { type: blob.type }));
+              return;
+            }
+            // 尺寸继续缩小后再压缩一轮
+            scale *= 0.7;
+          }
+          reject(new Error('图片压缩失败，请重试'));
+        } catch (err) {
+          reject(err);
+        }
+      };
+      img.onerror = () => reject(new Error('图片加载失败，请重试'));
+      img.src = reader.result as string;
+    };
+    reader.onerror = () => reject(new Error('读取图片失败，请重试'));
+    reader.readAsDataURL(file);
+  });
+};
+
+const handleImageChange = async () => {
   const file = ocrUploadId.value?.files?.[0]
   if (!file) {
     showDialog({
@@ -637,17 +690,19 @@ const handleImageChange = () => {
     return
   }
 
-  // 调用上传OCR图片接口
-  const formFormData = new FormData()
-  formFormData.append('file', file)
-
   showLoading();
-  apiService.uploadOcrImage(formFormData).then((response: any) => {
+  try {
-    apiService.marriageParseOcrInfo({
+    const compressedFile = await compressImage(file);
+    const formFormData = new FormData()
+    formFormData.append('file', compressedFile)
+
+    const response: any = await apiService.uploadOcrImage(formFormData);
+    const res: any = await apiService.marriageParseOcrInfo({
       mobile: formData.value.phone,
       smsCode: formData.value.smsCode,
       uploadId: response.data.uploadId,
-    }).then((res: any) => {
+    });
+
     if (res?.data?.parsed?.marriageNo) {
       formData.value.marriageNo = res?.data?.parsed?.marriageNo || '';
       formData.value.husbandName = res?.data?.parsed?.husbandName || '';
@@ -669,21 +724,14 @@ const handleImageChange = () => {
       });
       ocrUploadId.value && (ocrUploadId.value.value = '');
     }
-    }).catch((error) => {
+  } catch (error: any) {
     showDialog({
-        message: error?.msg || '结婚登记号信息提取失败，请重试！',
+      message: error?.msg || error?.message || '结婚登记号信息提取失败，请重试！',
     });
     ocrUploadId.value && (ocrUploadId.value.value = '');
-    }).finally(() => {
+  } finally {
     hideLoading();
-    })
+  }
-  }).catch((error) => {
-    showDialog({
-      message: error?.msg || '结婚登记号信息提取失败，请重试！',
-    });
-    ocrUploadId.value && (ocrUploadId.value.value = '');
-    hideLoading();
-  })
 }
 
 const goToIdUpload = () => {