update 更新压缩代码

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"
           ></u-upload>
           <tui-radio-group
@@ -422,6 +422,7 @@ import {
 import { mapState } from "vuex";
 import favoriteLoading from "@/components/favorite-loading/favorite-loading.vue";
 import navBar from "@/components/uni-nav-bar/uni-nav-bar";
+import { H5compressImg, getBase64Size } from "@/utils/tool.js";
 
 const orcImgTypeConf = {
   FR_ID_CARD_FRONT: "FR_ID_CARD_FRONT",
@@ -496,6 +497,8 @@ export default {
       currentBank: {},
       currentBankFile: {},
       loading: false,
+      maxSize: 20 * 1024 * 1024, //图片最大不能超过20M
+      fileMinSize: 5 * 1024, // 最小为5KB
     };
   },
   computed: {
@@ -688,7 +691,7 @@ export default {
       }
     },
     overSize(e) {
-      uni.$u.toast("上传图片大小不能超过8MB!");
+      uni.$u.toast("上传图片大小不能超过20MB!");
     },
 
     //上传图片
@@ -977,9 +980,37 @@ export default {
         this.form.individual_id_period_end = "";
       }
     },
+    compressImage(url) {
+      return new Promise((reslove, reject) => {
+        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;
 

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;

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="点击上传营业执照"
             ></u-upload>
@@ -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"
           ></u-upload>
           <u-upload
@@ -177,7 +177,7 @@
             width="180"
             height="110"
             uploadIcon=""
-            :maxSize="8 * 1024 * 1024"
+            :maxSize="maxSize"
             @oversize="overSize"
           ></u-upload>
         </view>
@@ -280,7 +280,7 @@
             height="110"
             :upload-text="''"
             uploadIcon=""
-            :maxSize="8 * 1024 * 1024"
+            :maxSize="maxSize"
             @oversize="overSize"
           ></u-upload>
           <u-upload
@@ -294,7 +294,7 @@
             height="110"
             :upload-text="''"
             uploadIcon=""
-            :maxSize="8 * 1024 * 1024"
+            :maxSize="maxSize"
             @oversize="overSize"
           ></u-upload>
         </view>
@@ -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) {

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"
           ></u-upload>
           <view
@@ -172,7 +172,7 @@ import { batchNoApi, imgOcrResultApi } from "../../api/upload";
 import { mapState } from "vuex";
 import { throttle, debounce } from "lodash";
 import navBar from "@/components/uni-nav-bar/uni-nav-bar";
-import { H5compressImg } from "@/utils/tool.js";
+import { H5compressImg, getBase64Size } from "@/utils/tool.js";
 
 const orcImgTypeConf = {
   FR_ID_CARD_FRONT: "FR_ID_CARD_FRONT",
@@ -259,14 +259,14 @@ export default {
       uni.navigateBack();
     },
     overSize(e) {
-      uni.$u.toast("上传图片大小不能超过5MB!");
+      uni.$u.toast("上传图片大小不能超过20MB!");
     },
     compressImage(url) {
       return new Promise((reslove, reject) => {
         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;
 

java-mall-app-shop-admin/utils/tool.js

@@ -4,33 +4,48 @@
  * scale 压缩质量 0-1
  * type 文件类型
  */
-export async function H5compressImg(imgSrc, scale) {
+export async function H5compressImg(
-  //imgSrc:图片的路径
+  imgSrc,
-  //scale:缩放比例 0-1之间
+  scale = 0.75,
-  return new Promise((reslove, reject) => {
+  maxWidth = 800,
-    var img = new Image(); //创建Image对象生成一个<img>标签
+  maxHeight = 800
-    img.src = imgSrc; //将图片路径赋给<img>标签的src
+) {
+  return new Promise((resolve, reject) => {
+    var img = new Image();
+    img.src = imgSrc;
     img.onload = () => {
-      //onload在图片加载成功后触发，在onload中完成压缩功能
+      // 计算按比例压缩后的尺寸
-      var h = img.height / 2; // 获取原本图片的宽高
+      let w = img.width;
-      var w = img.width / 2; //默认按比例压缩,根据需求修改
+      let h = img.height;
-      var canvas = document.createElement("canvas"); //创建画布
+      // 如果图片宽度或高度超过最大限制，则按比例缩放
-      var ctx = canvas.getContext("2d"); //设置为2d效果
+      if (w > maxWidth) {
-      var width = document.createAttribute("width"); //创建属性节点
+        h = (maxWidth / w) * h;
-      width.nodeValue = w; //设置属性值
+        w = maxWidth;
-      var height = document.createAttribute("height");
+      }
-      height.nodeValue = h;
+      if (h > maxHeight) {
-      canvas.setAttributeNode(width); //设置画布宽高
+        w = (maxHeight / h) * w;
-      canvas.setAttributeNode(height);
+        h = maxHeight;
-      ctx.drawImage(img, 0, 0, w, h); //将图片贴到画布上
+      }
-      //img:图片 0,0:粘贴的位置 w,h:粘贴图片的大小
+      var canvas = document.createElement("canvas");
-      var base64 = canvas.toDataURL("image/png", scale);
+      var ctx = canvas.getContext("2d");
-      //'image/png':压缩返回图片的类型 scale:图片质量
+      // 设置canvas的宽高
-      //如果要base64的流，可以直接将结果返回了
+      canvas.width = w;
-      canvas = null; //清除画布
+      canvas.height = h;
-      // var blob = base64ToBlob(base64); //需要二进制流调用该方法拿到
+      // 将图片绘制到canvas上
-      // let blobUrl = window.URL.createObjectURL(blob); //blob地址
+      ctx.drawImage(img, 0, 0, w, h);
-      reslove(base64);
+      // 设置输出格式为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);
     };
   });
 }