diff --git a/src/pages/home/index.vue b/src/pages/home/index.vue index c6edaf1..5928186 100644 --- a/src/pages/home/index.vue +++ b/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 => { + 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,53 +690,48 @@ const handleImageChange = () => { return } - // 调用上传OCR图片接口 - const formFormData = new FormData() - formFormData.append('file', file) - showLoading(); - apiService.uploadOcrImage(formFormData).then((response: any) => { - apiService.marriageParseOcrInfo({ + try { + 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 || ''; - formData.value.wifeName = res?.data?.parsed?.wifeName || ''; - formData.value.registerDate = res?.data?.parsed?.registerDate || ''; - formData.value.certificateHolder = res?.data?.parsed?.certificateHolder || ''; - formData.value.husbandId = res?.data?.parsed?.husbandId || ''; - formData.value.wifeId = res?.data?.parsed?.wifeId || ''; - formData.value.husbandGender = res?.data?.parsed?.husbandGender || ''; - formData.value.wifeGender = res?.data?.parsed?.wifeGender || ''; - formData.value.husbandBirthDate = res?.data?.parsed?.husbandBirthDate || ''; - formData.value.wifeBirthDate = res?.data?.parsed?.wifeBirthDate || ''; - formData.value.husbandNationality = res?.data?.parsed?.husbandNationality || ''; - formData.value.wifeNationality = res?.data?.parsed?.wifeNationality || ''; - persistMarriageInfo(); - } else { - showDialog({ - message: '结婚登记号信息提取失败,请重试!', - }); - ocrUploadId.value && (ocrUploadId.value.value = ''); - } - }).catch((error) => { + }); + + if (res?.data?.parsed?.marriageNo) { + formData.value.marriageNo = res?.data?.parsed?.marriageNo || ''; + formData.value.husbandName = res?.data?.parsed?.husbandName || ''; + formData.value.wifeName = res?.data?.parsed?.wifeName || ''; + formData.value.registerDate = res?.data?.parsed?.registerDate || ''; + formData.value.certificateHolder = res?.data?.parsed?.certificateHolder || ''; + formData.value.husbandId = res?.data?.parsed?.husbandId || ''; + formData.value.wifeId = res?.data?.parsed?.wifeId || ''; + formData.value.husbandGender = res?.data?.parsed?.husbandGender || ''; + formData.value.wifeGender = res?.data?.parsed?.wifeGender || ''; + formData.value.husbandBirthDate = res?.data?.parsed?.husbandBirthDate || ''; + formData.value.wifeBirthDate = res?.data?.parsed?.wifeBirthDate || ''; + formData.value.husbandNationality = res?.data?.parsed?.husbandNationality || ''; + formData.value.wifeNationality = res?.data?.parsed?.wifeNationality || ''; + persistMarriageInfo(); + } else { showDialog({ - message: error?.msg || '结婚登记号信息提取失败,请重试!', + message: '结婚登记号信息提取失败,请重试!', }); ocrUploadId.value && (ocrUploadId.value.value = ''); - }).finally(() => { - hideLoading(); - }) - }).catch((error) => { + } + } catch (error: any) { showDialog({ - message: error?.msg || '结婚登记号信息提取失败,请重试!', + message: error?.msg || error?.message || '结婚登记号信息提取失败,请重试!', }); ocrUploadId.value && (ocrUploadId.value.value = ''); + } finally { hideLoading(); - }) + } } const goToIdUpload = () => {