CRM_26-07-21#story#8995,调度app上传行驶证自动压缩

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 = '';