From 8e3faaa09e188166b306e3e933c4533eefb9baf5 Mon Sep 17 00:00:00 2001 From: qijq <624811160@qq.com> Date: Thu, 26 Jun 2025 09:08:35 +0800 Subject: [PATCH] =?UTF-8?q?update=20=E6=9B=B4=E6=96=B0=E5=8E=8B=E7=BC=A9?= =?UTF-8?q?=E4=BB=A3=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../pages/audit/checkAudit.vue | 49 +++++++++++++- .../pages/audit/shop1.vue | 2 +- .../pages/audit/shop2.vue | 26 ++++--- .../pages/audit/shop3.vue | 12 ++-- java-mall-app-shop-admin/utils/tool.js | 67 ++++++++++++------- 5 files changed, 113 insertions(+), 43 deletions(-) diff --git a/java-mall-app-shop-admin/pages/audit/checkAudit.vue b/java-mall-app-shop-admin/pages/audit/checkAudit.vue index 6425dd9..8c99d34 100644 --- a/java-mall-app-shop-admin/pages/audit/checkAudit.vue +++ b/java-mall-app-shop-admin/pages/audit/checkAudit.vue @@ -289,7 +289,7 @@ :height="item.imgHeight" :upload-text="item.uploadText" :uploadIconColor="item.uploadIconColor" - :maxSize="8 * 1024 * 1024" + :maxSize="maxSize" @oversize="overSize" > { + const tempFilePath = url; //url是选中图片的路径 + uni.compressImage({ + src: tempFilePath, + quality: 75, //压缩的程度 + success: (res) => { + reslove(res.tempFilePath); //压缩成功返回的路径 + }, + fail: (error) => { + console.log("压缩失败", error); + }, + }); + }); + }, // 营业执照 和 身份证 OCR识别 getOcrText(filePath, file, type) { return new Promise(async (resolve, reject) => { + //#ifdef APP-PLUS + filePath = await this.compressImage(filePath); + //#endif + + // 压缩图片已base64 方式上传 + + //#ifdef H5 + filePath = await H5compressImg(filePath, 0.75); + //#endif + + let size = getBase64Size(filePath); + console.log("OCR上图图片压缩后为：", size); + const batchNoRes = await batchNoApi(filePath, file, type); const batchNo = batchNoRes.batchNo; const formData = new FormData(); @@ -1019,6 +1050,20 @@ export default { return new Promise(async (resolve, reject) => { this.loading = true; + //#ifdef APP-PLUS + filePath = await this.compressImage(filePath); + //#endif + + // 压缩图片已base64 方式上传 + + //#ifdef H5 + filePath = await H5compressImg(filePath, 0.75); + //#endif + + let size = getBase64Size(filePath); + + console.log("压缩后的大小为：", size); + const batchNoRes = await batchNoApi(filePath, file, type); const batchNo = batchNoRes.batchNo; diff --git a/java-mall-app-shop-admin/pages/audit/shop1.vue b/java-mall-app-shop-admin/pages/audit/shop1.vue index b5f3f8b..2b562a4 100644 --- a/java-mall-app-shop-admin/pages/audit/shop1.vue +++ b/java-mall-app-shop-admin/pages/audit/shop1.vue @@ -227,7 +227,7 @@ export default { uni.navigateBack(); }, overSize(e) { - uni.$u.toast("上传图片大小不能超过8MB!"); + uni.$u.toast("上传图片大小不能超过20MB!"); }, async afterRead1(e) { const item = e.file; diff --git a/java-mall-app-shop-admin/pages/audit/shop2.vue b/java-mall-app-shop-admin/pages/audit/shop2.vue index c57814c..6a2dea3 100644 --- a/java-mall-app-shop-admin/pages/audit/shop2.vue +++ b/java-mall-app-shop-admin/pages/audit/shop2.vue @@ -53,7 +53,7 @@ :max-count="1" width="125" height="88" - :maxSize="8 * 1024 * 1024" + :maxSize="maxSize" @oversize="overSize" uploadText="点击上传营业执照" > @@ -130,7 +130,7 @@ " :fileList="form.specialLicenseFiles" :max-count="5" - :maxSize="8 * 1024 * 1024" + :maxSize="maxSize" @oversize="overSize" width="125" height="88" @@ -164,7 +164,7 @@ width="180" height="110" uploadIcon="" - :maxSize="8 * 1024 * 1024" + :maxSize="maxSize" @oversize="overSize" > @@ -280,7 +280,7 @@ height="110" :upload-text="''" uploadIcon="" - :maxSize="8 * 1024 * 1024" + :maxSize="maxSize" @oversize="overSize" > @@ -558,7 +558,7 @@ export default { action: "", limitType: ["png", "jpg", "jpeg"], //允许的图片后缀 fileMaxSize: 1 * 1024 * 1024, // 超出1M开启压缩 - maxSize: 5 * 1024 * 1024, //图片最大不能超过20M + maxSize: 20 * 1024 * 1024, //图片最大不能超过20M fileMinSize: 5 * 1024, // 最小为5KB fileList: [], fileList2: [], @@ -723,7 +723,7 @@ export default { uni.navigateBack(); }, overSize(e) { - uni.$u.toast("上传图片大小不能超过5MB!"); + uni.$u.toast("上传图片大小不能超过20MB!"); }, compressImage(url) { return new Promise((reslove, reject) => { @@ -754,7 +754,7 @@ export default { //#endif let size = getBase64Size(filePath); - console.log(size); + console.log("OCR上图图片压缩后为：", size); const batchNoRes = await batchNoApi(filePath, file, type); const batchNo = batchNoRes.batchNo; @@ -872,7 +872,13 @@ export default { this.fileList6.push(group); break; } - console.log(imgUrl); + + imgUrl = await H5compressImg(imgUrl, 0.75); + + let size = getBase64Size(imgUrl); + + console.log("上传图片压缩后的大小为:", size); + let res = await UploadFilePromise(imgUrl); if (res && res.status == 200) { diff --git a/java-mall-app-shop-admin/pages/audit/shop3.vue b/java-mall-app-shop-admin/pages/audit/shop3.vue index f912dbd..b32f628 100644 --- a/java-mall-app-shop-admin/pages/audit/shop3.vue +++ b/java-mall-app-shop-admin/pages/audit/shop3.vue @@ -44,7 +44,7 @@ width="268" height="125" uploadText="点击上传银行卡正面" - :maxSize="8 * 1024 * 1024" + :maxSize="maxSize" @oversize="overSize" > { const tempFilePath = url; //url是选中图片的路径 uni.compressImage({ src: tempFilePath, - quality: 90, //压缩的程度 + quality: 75, //压缩的程度 success: (res) => { reslove(res.tempFilePath); //压缩成功返回的路径 }, @@ -290,6 +290,10 @@ export default { filePath = await H5compressImg(filePath, 0.75); //#endif + let size = getBase64Size(filePath); + + console.log("压缩后的大小为：", size); + const batchNoRes = await batchNoApi(filePath, file, type); const batchNo = batchNoRes.batchNo; diff --git a/java-mall-app-shop-admin/utils/tool.js b/java-mall-app-shop-admin/utils/tool.js index 964a647..84eae5a 100644 --- a/java-mall-app-shop-admin/utils/tool.js +++ b/java-mall-app-shop-admin/utils/tool.js @@ -4,33 +4,48 @@ * scale 压缩质量 0-1 * type 文件类型 */ -export async function H5compressImg(imgSrc, scale) { - //imgSrc:图片的路径 - //scale:缩放比例 0-1之间 - return new Promise((reslove, reject) => { - var img = new Image(); //创建Image对象生成一个标签 - img.src = imgSrc; //将图片路径赋给标签的src +export async function H5compressImg( + imgSrc, + scale = 0.75, + maxWidth = 800, + maxHeight = 800 +) { + return new Promise((resolve, reject) => { + var img = new Image(); + img.src = imgSrc; img.onload = () => { - //onload在图片加载成功后触发，在onload中完成压缩功能 - var h = img.height / 2; // 获取原本图片的宽高 - var w = img.width / 2; //默认按比例压缩,根据需求修改 - var canvas = document.createElement("canvas"); //创建画布 - var ctx = canvas.getContext("2d"); //设置为2d效果 - var width = document.createAttribute("width"); //创建属性节点 - width.nodeValue = w; //设置属性值 - var height = document.createAttribute("height"); - height.nodeValue = h; - canvas.setAttributeNode(width); //设置画布宽高 - canvas.setAttributeNode(height); - ctx.drawImage(img, 0, 0, w, h); //将图片贴到画布上 - //img:图片 0,0:粘贴的位置 w,h:粘贴图片的大小 - var base64 = canvas.toDataURL("image/png", scale); - //'image/png':压缩返回图片的类型 scale:图片质量 - //如果要base64的流，可以直接将结果返回了 - canvas = null; //清除画布 - // var blob = base64ToBlob(base64); //需要二进制流调用该方法拿到 - // let blobUrl = window.URL.createObjectURL(blob); //blob地址 - reslove(base64); + // 计算按比例压缩后的尺寸 + let w = img.width; + let h = img.height; + // 如果图片宽度或高度超过最大限制，则按比例缩放 + if (w > maxWidth) { + h = (maxWidth / w) * h; + w = maxWidth; + } + if (h > maxHeight) { + w = (maxHeight / h) * w; + h = maxHeight; + } + var canvas = document.createElement("canvas"); + var ctx = canvas.getContext("2d"); + // 设置canvas的宽高 + canvas.width = w; + canvas.height = h; + // 将图片绘制到canvas上 + ctx.drawImage(img, 0, 0, w, h); + // 设置输出格式为jpeg，质量为scale + var base64; + try { + base64 = canvas.toDataURL("image/jpeg", scale); + } catch (e) { + // 如果浏览器不支持jpeg，或者有跨域问题，则使用png + base64 = canvas.toDataURL("image/png", scale); + } + canvas = null; + resolve(base64); + }; + img.onerror = (e) => { + reject(e); }; }); }