From fd080aa39b5a5f638c423a49002977cc5df949ca Mon Sep 17 00:00:00 2001 From: zhouxueli <2841188632@qq.com> Date: Mon, 13 Jul 2026 13:55:28 +0800 Subject: [PATCH] =?UTF-8?q?CRM=5F26-07-21#story#8995,=E8=B0=83=E5=BA=A6app?= =?UTF-8?q?=E4=B8=8A=E4=BC=A0=E8=A1=8C=E9=A9=B6=E8=AF=81=E8=87=AA=E5=8A=A8?= =?UTF-8?q?=E5=8E=8B=E7=BC=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/index/vehicleAdd.vue | 168 +++++++++++++++++++++++++++------ 1 file changed, 140 insertions(+), 28 deletions(-) diff --git a/src/views/index/vehicleAdd.vue b/src/views/index/vehicleAdd.vue index ac2fd08e..e67ac572 100644 --- a/src/views/index/vehicleAdd.vue +++ b/src/views/index/vehicleAdd.vue @@ -21,8 +21,6 @@ v-model="vehicleLicenseFrontList" :after-read="vehicleLicenseFrontHandler" @delete="vehicleLicenseFrontDelete" - @oversize="onOversize" - :max-size="5 * 1024 * 1024" max-count="1" :preview-size="54" accept="image " @@ -37,8 +35,6 @@ v-model="vehicleLicenseBackList" :after-read="vehicleLicenseBackHandler" @delete="vehicleLicenseBackDelete" - @oversize="onOversize" - :max-size="5 * 1024 * 1024" max-count="1" :preview-size="54" accept="image " @@ -53,8 +49,6 @@ v-model="vehicleLicenseCarPhotoList" :after-read="vehicleLicenseCarHandler" @delete="vehicleLicenseCarPhotoDelete" - @oversize="onOversize" - :max-size="5 * 1024 * 1024" max-count="1" :preview-size="54" accept="image " @@ -69,8 +63,6 @@ v-model="vehicleFrontPhotoList" :after-read="vehicleFrontPhotoHandler" @delete="vehicleFrontPhotoDelete" - @oversize="onOversize" - :max-size="5 * 1024 * 1024" max-count="1" :preview-size="54" accept="image " @@ -803,33 +795,153 @@ export default { onOversize() { this.$toast(`文件大小不能超过5M`) }, + blobToDataURL(blob) { + return new Promise((resolve, reject) => { + const reader = new FileReader(); + reader.onload = (e) => resolve(e.target.result); + reader.onerror = () => reject(new Error('读取压缩图片失败')); + reader.readAsDataURL(blob); + }); + }, + compressImage(file, maxSize = 5 * 1024 * 1024) { + return new Promise((resolve, reject) => { + const reader = new FileReader(); + reader.onload = (e) => { + const img = new Image(); + img.onload = () => { + const canvas = document.createElement('canvas'); + const ctx = canvas.getContext('2d'); + const originWidth = img.width; + const originHeight = img.height; + + const tryQuality = (quality = 0.9) => { + canvas.width = originWidth; + canvas.height = originHeight; + ctx.clearRect(0, 0, originWidth, originHeight); + ctx.drawImage(img, 0, 0, originWidth, originHeight); + canvas.toBlob((blob) => { + if (!blob) return reject(new Error('压缩失败')); + if (blob.size <= maxSize || quality <= 0.1) { + if (blob.size <= maxSize) { + resolve(blob); + } else { + tryResolution(); + } + return; + } + tryQuality(quality - 0.1); + }, 'image/jpeg', quality); + }; + + const tryResolution = (scale = 0.9, quality = 0.8) => { + const width = Math.floor(originWidth * scale); + const height = Math.floor(originHeight * scale); + canvas.width = width; + canvas.height = height; + ctx.clearRect(0, 0, width, height); + ctx.drawImage(img, 0, 0, width, height); + canvas.toBlob((blob) => { + if (!blob) return reject(new Error('压缩失败')); + if (blob.size <= maxSize || scale <= 0.1) { + if (blob.size <= maxSize) { + resolve(blob); + } else { + reject(new Error('超过5M')); + } + return; + } + tryResolution(scale - 0.1, quality); + }, 'image/jpeg', quality); + }; + + tryQuality(); + }; + img.onerror = () => reject(new Error('图片加载失败')); + img.src = e.target.result; + }; + reader.onerror = () => reject(new Error('文件读取失败')); + reader.readAsDataURL(file); + }); + }, + async compressFileItem(fileItem, maxSize = 5 * 1024 * 1024) { + const rawFile = fileItem.file; + if (rawFile.size <= maxSize) return rawFile; + const blob = await this.compressImage(rawFile, maxSize); + if (blob.size > maxSize) { + throw new Error('超过5M'); + } + const fileName = rawFile.name.replace(/\.[^.]+$/, '') + '.jpg'; + const compressedFile = new File([blob], fileName, { type: 'image/jpeg' }); + fileItem.file = compressedFile; + fileItem.size = compressedFile.size; + fileItem.content = await this.blobToDataURL(blob); + const mb1 = (compressedFile.size / 1024 / 1024).toFixed(2); + console.log(`压缩后为：${mb1}M`) + return compressedFile; + }, async vehicleLicenseFrontHandler(file) { // 上传 行驶证首页 - const formData = new FormData(); - formData.append("file" , file.file); - let res = await uploadImage(formData) - this.vehicleLicenseFront = res.data; - await this.vehicleOcrHandler(); + try { + const uploadFile = await this.compressFileItem(file); + if (uploadFile.size > 5 * 1024 * 1024) { + this.onOversize(); + return; + } + const formData = new FormData(); + formData.append("file" , uploadFile); + let res = await uploadImage(formData) + this.vehicleLicenseFront = res.data; + await this.vehicleOcrHandler(); + } catch (e) { + this.onOversize(); + } }, async vehicleLicenseBackHandler(file) { // 上传 行驶证副页 - this.vehicleLicenseBackOcrFlag = true; - const formData = new FormData(); - formData.append("file" , file.file); - let res = await uploadImage(formData); - this.vehicleLicenseBack = res.data; - await this.vehicleBackOcrHandler(); + try { + this.vehicleLicenseBackOcrFlag = true; + const uploadFile = await this.compressFileItem(file); + if (uploadFile.size > 5 * 1024 * 1024) { + this.onOversize(); + return; + } + const formData = new FormData(); + formData.append("file" , uploadFile); + let res = await uploadImage(formData); + this.vehicleLicenseBack = res.data; + await this.vehicleBackOcrHandler(); + } catch (e) { + this.onOversize(); + } }, async vehicleLicenseCarHandler(file) { // 上传 行驶证车辆照片 - const formData = new FormData(); - formData.append("file" , file.file); - let res = await uploadImage(formData); - this.vehicleLicenseCarPhoto = res.data; + try { + const uploadFile = await this.compressFileItem(file); + if (uploadFile.size > 5 * 1024 * 1024) { + this.onOversize(); + return; + } + const formData = new FormData(); + formData.append("file" , uploadFile); + let res = await uploadImage(formData); + this.vehicleLicenseCarPhoto = res.data; + } catch (e) { + this.onOversize(); + } }, async vehicleFrontPhotoHandler(file) { // 上传 车头照 - const formData = new FormData(); - formData.append("file" , file.file); - let res = await uploadImage(formData); - this.vehicleFrontPhoto = res.data; - await this.ocrCarFrontHandler() + try { + const uploadFile = await this.compressFileItem(file); + if (uploadFile.size > 5 * 1024 * 1024) { + this.onOversize(); + return; + } + const formData = new FormData(); + formData.append("file" , uploadFile); + let res = await uploadImage(formData); + this.vehicleFrontPhoto = res.data; + await this.ocrCarFrontHandler() + } catch (e) { + this.onOversize(); + } }, vehicleLicenseFrontDelete() { // 删除 行驶证首页 this.vehicleLicenseFront = '';