压缩图片：指定图片压缩大小( 设置默认1.8M )

src/main.js

@@ -1,56 +1,58 @@
-import Vue from 'vue'
-import App from '@/App'
-import router from '@/router' // api: https://github.com/vuejs/vue-router
-import store from '@/store' // api: https://github.com/vuejs/vuex
-import VueCookie from 'vue-cookie' // api: https://github.com/alfhen/vue-cookie
-import '@/element-ui' // api: https://github.com/ElemeFE/element
-import '@/icons' // api: http://www.iconfont.cn/
-import '@/element-ui-theme'
-import '@/assets/scss/index.scss'
-import httpRequest from '@/utils/httpRequest' // api: https://github.com/axios/axios
-import '@/assets/styles/fonts.css' //字体样式
-import {
-  isAuth
-} from '@/utils'
-import cloneDeep from 'lodash/cloneDeep'
-import BaiduMap from 'vue-baidu-map'
-import {
-  VueJsonp
-} from 'vue-jsonp'
+import Vue from "vue";
+import App from "@/App";
+import router from "@/router"; // api: https://github.com/vuejs/vue-router
+import store from "@/store"; // api: https://github.com/vuejs/vuex
+import VueCookie from "vue-cookie"; // api: https://github.com/alfhen/vue-cookie
+import "@/element-ui"; // api: https://github.com/ElemeFE/element
+import "@/icons"; // api: http://www.iconfont.cn/
+import "@/element-ui-theme";
+import "@/assets/scss/index.scss";
+import httpRequest from "@/utils/httpRequest"; // api: https://github.com/axios/axios
+import "@/assets/styles/fonts.css"; //字体样式
+import { isAuth } from "@/utils";
+import cloneDeep from "lodash/cloneDeep";
+import BaiduMap from "vue-baidu-map";
+import { VueJsonp } from "vue-jsonp";
 
 import axios from "axios";
-import { getCompressionQuality, compressImage } from '@/utils/compressionUtils.js';
 
+import * as imageConversion from 'image-conversion';
+import {
+  getCompressionQuality,
+  compressImage
+} from "@/utils/compressionUtils.js";
 
-import Viewer from 'v-viewer'
-import 'viewerjs/dist/viewer.css'
-Vue.use(VueJsonp)
-Vue.use(Viewer)
+import Viewer from "v-viewer";
+import "viewerjs/dist/viewer.css";
+Vue.use(VueJsonp);
+Vue.use(Viewer);
 Vue.use(Viewer, {
   defaultOptions: {
-      zIndex: 99999, // 设置图片预览组件的层级，确保能在其他组件之上
-  },
-})
+    zIndex: 99999 // 设置图片预览组件的层级，确保能在其他组件之上
+  }
+});
 // 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.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.$axios = axios
+Vue.prototype.$axios = axios;
 
- //上传图片前压缩图片
-Vue.prototype.$processImage=function (that, file, isUnload) {
+//上传图片前压缩图片
+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);
+  console.log("压缩前图片size", file.size / 1024 / 1024);
   // uploadData.isCompressed = 0
   if (
     imgType !== "IMAGE/JPG" &&
     imgType !== "IMAGE/JPEG" &&
-    imgType !== "IMAGE/PNG"
+    imgType !== "IMAGE/PNG" &&
+    imgType !== "IMAGE/WEBP"
   ) {
     that.$message.error("请上传正确格式的图片");
     return false;
@@ -60,68 +62,83 @@ Vue.prototype.$processImage=function (that, file, isUnload) {
     return false;
   }
   //压缩质量
-  const quality = getCompressionQuality(isLtSize,imgType);
-  //大于2M走压缩逻辑
+  // 1、 按倍率压缩
+  // 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;
+  //     });
+  // }
+
+  // 2、 按指定大小压缩
   if (!isLt2M) {
-    console.log('quality', quality);
-    return compressImage(file, quality)
-      .then(compressedFile => {
-        return compressedFile;
-      })
-      .catch(err => {
-        console.error('Image compression error:', err);
-        return file;
+    // this.$message.error("上传头像图片大小不能超过2MB");
+    // return false;
+    return new Promise(resolve => {
+      // 压缩到100KB,这里的100就是要压缩的大小，可自定义
+      imageConversion.compressAccurately(file, 1800).then(res => {
+        console.log(res.size / 1024 / 1024,'压缩后图片大小');
+        resolve(res);
       });
+    });
   }
-},
+
+};
 
 Viewer.setDefaults({
   // 工具栏按钮的控制
-    toolbar: {
-      zoomIn: 1, // 放大
-      zoomOut: 1, // 缩小
-      oneToOne: 1, // 100%大小
-      reset: 1, // 还原
-      prev: 0, // 上一张
-      play: 1, // 全屏显示
-      next: 0, // 下一张
-      rotateLeft: 1, // 逆时针旋转
-      rotateRight: 1, // 顺时针旋转
-      flipHorizontal: 1, // 水平翻转
-      flipVertical: 1 // 垂直翻转
-    }
-  })
+  toolbar: {
+    zoomIn: 1, // 放大
+    zoomOut: 1, // 缩小
+    oneToOne: 1, // 100%大小
+    reset: 1, // 还原
+    prev: 0, // 上一张
+    play: 1, // 全屏显示
+    next: 0, // 下一张
+    rotateLeft: 1, // 逆时针旋转
+    rotateRight: 1, // 顺时针旋转
+    flipHorizontal: 1, // 水平翻转
+    flipVertical: 1 // 垂直翻转
+  }
+});
 
 Vue.use(BaiduMap, {
-  ak: 'miP4RMG1yZoROVRSqTPghvUaRb68iGUB'
-})
+  ak: "miP4RMG1yZoROVRSqTPghvUaRb68iGUB"
+});
 
-Vue.use(VueCookie)
-Vue.config.productionTip = false
+Vue.use(VueCookie);
+Vue.config.productionTip = false;
 
 // 非生产环境, 适配mockjs模拟数据                 // api: https://github.com/nuysoft/Mock
-if (process.env.NODE_ENV !== 'production') {
-  require('@/mock')
+if (process.env.NODE_ENV !== "production") {
+  require("@/mock");
 }
 
 // 挂载全局
-Vue.prototype.$http = httpRequest // ajax请求方法
-Vue.prototype.isAuth = isAuth // 权限方法
+Vue.prototype.$http = httpRequest; // ajax请求方法
+Vue.prototype.isAuth = isAuth; // 权限方法
 
 // 保存整站vuex本地储存初始状态
-window.SITE_CONFIG['storeState'] = cloneDeep(store.state)
+window.SITE_CONFIG["storeState"] = cloneDeep(store.state);
 router.afterEach(() => {
   document.body.scrollTop = 0;
   document.documentElement.scrollTop = 0;
-   // window.scrollTo(0, 0);
-})
+  // window.scrollTo(0, 0);
+});
 /* eslint-disable no-new */
 new Vue({
-  el: '#app',
+  el: "#app",
   router,
   store,
-  template: '<App/>',
+  template: "<App/>",
   components: {
     App
   }
-})
+});

src/utils/compressionUtils.js

@@ -2,25 +2,29 @@ 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) {
+    } else if (isLtSize >= 3 && isLtSize < 5) {
       return 0.80;
-    } else if (isLtSize >= 10 && isLtSize < 20) {
+    } else if (isLtSize >= 5 && isLtSize < 10) {
       return 0.70;
-    } else if (isLtSize >= 20 && isLtSize < 30) {
+    } else if (isLtSize >= 10 && isLtSize < 20) {
       return 0.60;
+    } else if (isLtSize >= 20 && isLtSize < 30) {
+      return 0.50;
     }
-  return 0.90;
+  return 0.40;
 }
 //压缩逻辑
 export function compressImage(file, quality) {
   return new Promise((resolve, reject) => {
     imageConversion.compress(file, quality)
       .then((res) => {
-        resolve(res);
-        console.log('压缩后体积', res.size / (1024 * 1024));
+        if(res.size / (1024 * 1024)>=2){
+          compressImage(res,quality)
+          console.log('压缩后体积', res.size / (1024 * 1024));
+        }else{
+          resolve(res);
+        }
       })
       .catch((error) => {
         reject(error);

src/views/common/home.vue

@@ -1691,7 +1691,7 @@ export default {
             dateType: this.flag,
             shopType:this.spEarningTypeId,
             startTime:this.hour?this.hour[0]:'',
-            endTime:this.hour?this.hour[0]:''
+            endTime:this.hour?this.hour[1]:''
           })
         }).then(({ data }) => {
           console.log(data, "导出");

src/views/runErrands/orderCenter.vue

@@ -271,6 +271,7 @@
 				status: '',
 				activeName: 'first',
 				tableDataLoading: true,
+        tableDataLoadingU:false,
 				tableData: [],
 				checkBoxData: [], //多选框选择的值
 				statesnum: [{

src/views/selfShop/shopAmend.vue

@@ -582,6 +582,7 @@
             :show-file-list="false"
             :on-success="handleUploadSuccessXq"
             :on-progress="onprogress1"
+            :before-upload="beforeAvatarUpload"
           >
             <el-progress
               v-if="percentage1 > 0 && percentage1 < 100"

src/views/vueMchat/vueMchat.vue

@@ -716,7 +716,8 @@ export default {
         testmsg == "png" ||
         testmsg == "jpg" ||
         testmsg == "jpeg" ||
-        testmsg == "gif"
+        testmsg == "gif" ||
+        testmsg == "webp"
       ) {
         extension = testmsg;
         return this.$processImage(this, file, false);