大于2M的图片进行图片压缩处理

npm-shrinkwrap.json

@@ -3241,6 +3241,11 @@
 				"randomfill": "^1.0.3"
 			}
 		},
+		"crypto-js": {
+			"version": "4.2.0",
+			"resolved": "https://registry.npmmirror.com/crypto-js/-/crypto-js-4.2.0.tgz",
+			"integrity": "sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q=="
+		},
 		"css-color-names": {
 			"version": "0.0.4",
 			"resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz",
@@ -7053,6 +7058,11 @@
 			"integrity": "sha512-Pgs951kaMm5GXP7MOvxERINe3gsaVjUWFm+UZPSq9xYriQAksyhg0csnS0KXSNRD5NmNdapXEpjxG49+AKh/ug==",
 			"dev": true
 		},
+		"image-conversion": {
+			"version": "2.1.1",
+			"resolved": "https://registry.npmmirror.com/image-conversion/-/image-conversion-2.1.1.tgz",
+			"integrity": "sha512-hnMOmP7q2jxA+52FZ+wHNhg3fdFRlgfngsQH2JQHEQkafY7tj/8F15e6Rv/RxDegc872jvyaRHwMbkTZK1Cjbg=="
+		},
 		"image-size": {
 			"version": "0.5.5",
 			"resolved": "https://registry.npmjs.org/image-size/-/image-size-0.5.5.tgz",

package.json

@@ -17,6 +17,7 @@
     "axios": "0.17.1",
     "babel-plugin-component": "0.10.1",
     "babel-polyfill": "6.26.0",
+    "crypto-js": "^4.2.0",
     "element-china-area-data": "^5.0.2",
     "element-ui": "2.8.2",
     "fs": "0.0.1-security",
@@ -25,6 +26,7 @@
     "gulp-load-plugins": "1.5.0",
     "gulp-replace": "0.6.1",
     "gulp-shell": "0.6.5",
+    "image-conversion": "^2.1.1",
     "lodash": "4.17.5",
     "npm": "^6.9.0",
     "sass-loader": "6.0.6",

src/main.js

@@ -11,12 +11,50 @@ import httpRequest from '@/utils/httpRequest' // api: https://github.com/axios/a
 import '@/mock/modules/sys-menu.js'
 import '@/assets/styles/fonts.css' //字体样式
 
-Vue.prototype.Tupiantou ='https://mxys.chuanghai-tech.com/sqx_fast/alioss/upload'//线上
-// Vue.prototype.Tupiantou ='https://www.daweilinli.com/sqx_fast/alioss/upload'//线下
+import { getCompressionQuality, compressImage } from '@/utils/compressionUtils.js';
+
+// Vue.prototype.Tupiantou ='https://mxys.chuanghai-tech.com/sqx_fast/alioss/upload'//线上
+Vue.prototype.Tupiantou ='https://mxys.chuanghai-tech.com/wm-test/wm-api/sqx_fast/alioss/upload'//线下
 Vue.prototype.Tupian =function(img){
 	return 'https://mxys.chuanghai-tech.com/wmfile'+img
 }//全局图片请求头
 
+ //上传图片前压缩图片
+ Vue.prototype.$processImage=function (that, file, isUnload) {
+  const imgType = file.type.toUpperCase();
+  const isLt30M = file.size / 1024 / 1024 < 30;
+  const isLt2M = file.size / 1024 / 1024 < 2;
+  const isLtSize = file.size / 1024 / 1024;
+  console.log('压缩前图片size', file.size / 1024 / 1024);
+  // uploadData.isCompressed = 0
+  if (
+    imgType !== "IMAGE/JPG" &&
+    imgType !== "IMAGE/JPEG" &&
+    imgType !== "IMAGE/PNG"
+  ) {
+    that.$message.error("请上传正确格式的图片");
+    return false;
+  }
+  if (!isLt30M) {
+    that.$message.error("上传的图片不能超过30Mb");
+    return false;
+  }
+  //压缩质量
+  const quality = getCompressionQuality(isLtSize,imgType);
+  //大于2M走压缩逻辑
+  if (!isLt2M) {
+    console.log('quality', quality);
+    return compressImage(file, quality)
+      .then(compressedFile => {
+        return compressedFile;
+      })
+      .catch(err => {
+        console.error('Image compression error:', err);
+        return file;
+      });
+  }
+}
+
 import {
   isAuth
 } from '@/utils'

src/utils/compressionUtils.js

@@ -0,0 +1,30 @@
+import * as imageConversion from 'image-conversion';
+//压缩质量
+export function getCompressionQuality(isLtSize,imgType) {
+  if (isLtSize < 3) {
+      return 0.93;
+    } else if (isLtSize >= 3 && isLtSize < 5) {
+      return 0.90;
+    } else if (isLtSize >= 5 && isLtSize < 10) {
+      return 0.80;
+    } else if (isLtSize >= 10 && isLtSize < 20) {
+      return 0.70;
+    } else if (isLtSize >= 20 && isLtSize < 30) {
+      return 0.60;
+    }
+  return 0.90;
+}
+//压缩逻辑
+export function compressImage(file, quality) {
+  return new Promise((resolve, reject) => {
+    imageConversion.compress(file, quality)
+      .then((res) => {
+        resolve(res);
+        console.log('压缩后体积', res.size / (1024 * 1024));
+      })
+      .catch((error) => {
+        reject(error);
+      });
+  });
+}
+

src/views/shopManagement/mission.vue

@@ -1326,42 +1326,42 @@ export default {
     exportList() {
       this.exportVisible = true;
       this.exportTitle = "导出";
-      this.exportFlag = 4;
+      // this.exportFlag = 4;
       console.log(this.tableData2.totalCount, "导出条数");
-      // if (this.tableData2.totalCount >= 50000) {
-      //   this.exportTitle = "导出错误";
-      //   this.exportFlag = 1;
-      // } else {
-      //   this.exportTitle = "导出";
-      //   this.exportFlag = 2;
-      //   this.exportVisible = true;
-      //   var userId = this.$cookie.get('userId')
-      //   var shopId = this.$cookie.get('shopId')
-      //   this.$http({
-      //     url: this.$http.adornUrl("admin/export/excelOrder"),
-      //     method: "get",
-      //     params: this.$http.adornParams({
-      //       'userId':userId,
-      //       'phone': this.phone,
-      //   	  'userName': this.userName,
-      //   	  'orderNumber': this.orderNumber,
-      //   	  'status': this.status,
-      //       'reservationFlag': this.reservationFlag,
-      //   	  'shopId': shopId,
-      //   	  'orderType': this.orderType,
-      //   	  'startTime': this.startTime,
-      //   	  'endTime': this.endTime,
-      //       'payStartTime':this.payStartTime,
-      //       'payEndTime':this.payEndTime
-      //     })
-      //   }).then(({ data }) => {
-      //     console.log(data, "导出");
-      //     if(data.code==0){
-      //       this.exportTitle = "导出成功";
-      //       this.exportFlag = 3;
-      //     }
-      //   });
-      // }
+      if (this.tableData2.totalCount >= 50000) {
+        this.exportTitle = "导出错误";
+        this.exportFlag = 1;
+      } else {
+        this.exportTitle = "导出";
+        this.exportFlag = 2;
+        this.exportVisible = true;
+        var userId = this.$cookie.get('userId')
+        var shopId = this.$cookie.get('shopId')
+        this.$http({
+          url: this.$http.adornUrl("admin/export/excelOrder"),
+          method: "get",
+          params: this.$http.adornParams({
+            'userId':userId,
+            'phone': this.phone,
+        	  'userName': this.userName,
+        	  'orderNumber': this.orderNumber,
+        	  'status': this.status,
+            'reservationFlag': this.reservationFlag,
+        	  'shopId': shopId,
+        	  'orderType': this.orderType,
+        	  'startTime': this.startTime,
+        	  'endTime': this.endTime,
+            'payStartTime':this.payStartTime,
+            'payEndTime':this.payEndTime
+          })
+        }).then(({ data }) => {
+          console.log(data, "导出");
+          if(data.code==0){
+            this.exportTitle = "导出成功";
+            this.exportFlag = 3;
+          }
+        });
+      }
     },
     exportAffirm() {
       this.exportVisible = false;