新增上传图片压缩

hookehuyr
Commit 5063c70decef58364948dab24610b89579d4d935 5063c70d 1 parent 2f910f4e
Showing 4 changed files with 132 additions and 1 deletions
package-lock.json
package.json
src/views/fxPark/poster.vue
yarn.lock
--- a/package-lock.json
View file @5063c70
+++ b/package-lock.json
View file @5063c70
@@ -21,6 +21,7 @@
         "moment": "^2.29.3",
         "mui-player": "^1.6.0",
         "recorder-core": "^1.3.23122400",
+        "shrinkpng": "^1.2.0-beta.1",
         "typescript": "^4.7.3",
         "uuid": "^8.3.2",
         "vant": "^4.8.10",
@@ -135,6 +136,23 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@babel/runtime-corejs3": {
+      "version": "7.24.4",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/@babel/runtime-corejs3/-/runtime-corejs3-7.24.4.tgz",
+      "integrity": "sha512-VOQOexSilscN24VEY810G/PqtpFvx/z6UqDIjIWbDe2368HhDLkYN5TYwaEz/+eRCUkhJ2WaNLLmQAlxzfWj4w==",
+      "dependencies": {
+        "core-js-pure": "^3.30.2",
+        "regenerator-runtime": "^0.14.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/runtime-corejs3/node_modules/regenerator-runtime": {
+      "version": "0.14.1",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
+      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
+    },
     "node_modules/@babel/runtime/node_modules/regenerator-runtime": {
       "version": "0.14.1",
       "resolved": "https://mirrors.cloud.tencent.com/npm/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
@@ -1596,6 +1614,16 @@
         "url": "https://opencollective.com/core-js"
       }
     },
+    "node_modules/core-js-pure": {
+      "version": "3.37.0",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/core-js-pure/-/core-js-pure-3.37.0.tgz",
+      "integrity": "sha512-d3BrpyFr5eD4KcbRvQ3FTUx/KWmaDesr7+a3+1+P46IUnNoEt+oiLijPINZMEon7w9oGkIINWxrBAU9DEciwFQ==",
+      "hasInstallScript": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/core-js"
+      }
+    },
     "node_modules/core-util-is": {
       "version": "1.0.2",
       "resolved": "https://mirrors.cloud.tencent.com/npm/core-util-is/-/core-util-is-1.0.2.tgz",
@@ -4222,6 +4250,11 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/pako": {
+      "version": "2.1.0",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/pako/-/pako-2.1.0.tgz",
+      "integrity": "sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug=="
+    },
     "node_modules/param-case": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz",
@@ -4895,6 +4928,16 @@
         "node": ">=8"
       }
     },
+    "node_modules/shrinkpng": {
+      "version": "1.2.0-beta.1",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/shrinkpng/-/shrinkpng-1.2.0-beta.1.tgz",
+      "integrity": "sha512-14B3Na+thQHyXkz1cMXKcMQ/mYBCJFWck1Z5z3NzmQqF5x712vuM9WWt2g/2V6/+ZYUA40FQLyNl6Q9TcffdEw==",
+      "dependencies": {
+        "@babel/runtime-corejs3": "^7.18.3",
+        "pako": "^2.0.4",
+        "uzip": "^0.20201231.0"
+      }
+    },
     "node_modules/side-channel": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
@@ -5676,6 +5719,11 @@
         "uuid": "dist/bin/uuid"
       }
     },
+    "node_modules/uzip": {
+      "version": "0.20201231.0",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/uzip/-/uzip-0.20201231.0.tgz",
+      "integrity": "sha512-OZeJfZP+R0z9D6TmBgLq2LHzSSptGMGDGigGiEe0pr8UBe/7fdflgHlHBNDASTXB5jnFuxHpNaJywSg8YFeGng=="
+    },
     "node_modules/vant": {
       "version": "4.8.10",
       "resolved": "https://mirrors.cloud.tencent.com/npm/vant/-/vant-4.8.10.tgz",
@@ -6183,6 +6231,22 @@
         }
       }
     },
+    "@babel/runtime-corejs3": {
+      "version": "7.24.4",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/@babel/runtime-corejs3/-/runtime-corejs3-7.24.4.tgz",
+      "integrity": "sha512-VOQOexSilscN24VEY810G/PqtpFvx/z6UqDIjIWbDe2368HhDLkYN5TYwaEz/+eRCUkhJ2WaNLLmQAlxzfWj4w==",
+      "requires": {
+        "core-js-pure": "^3.30.2",
+        "regenerator-runtime": "^0.14.0"
+      },
+      "dependencies": {
+        "regenerator-runtime": {
+          "version": "0.14.1",
+          "resolved": "https://mirrors.cloud.tencent.com/npm/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
+          "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
+        }
+      }
+    },
     "@babel/standalone": {
       "version": "7.23.6",
       "resolved": "https://mirrors.cloud.tencent.com/npm/@babel/standalone/-/standalone-7.23.6.tgz",
@@ -7265,6 +7329,11 @@
       "resolved": "https://mirrors.cloud.tencent.com/npm/core-js/-/core-js-3.34.0.tgz",
       "integrity": "sha512-aDdvlDder8QmY91H88GzNi9EtQi2TjvQhpCX6B1v/dAZHU1AuLgHvRh54RiOerpEhEW46Tkf+vgAViB/CWC0ag=="
     },
+    "core-js-pure": {
+      "version": "3.37.0",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/core-js-pure/-/core-js-pure-3.37.0.tgz",
+      "integrity": "sha512-d3BrpyFr5eD4KcbRvQ3FTUx/KWmaDesr7+a3+1+P46IUnNoEt+oiLijPINZMEon7w9oGkIINWxrBAU9DEciwFQ=="
+    },
     "core-util-is": {
       "version": "1.0.2",
       "resolved": "https://mirrors.cloud.tencent.com/npm/core-util-is/-/core-util-is-1.0.2.tgz",
@@ -9197,6 +9266,11 @@
         "aggregate-error": "^3.0.0"
       }
     },
+    "pako": {
+      "version": "2.1.0",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/pako/-/pako-2.1.0.tgz",
+      "integrity": "sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug=="
+    },
     "param-case": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz",
@@ -9657,6 +9731,16 @@
       "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
       "dev": true
     },
+    "shrinkpng": {
+      "version": "1.2.0-beta.1",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/shrinkpng/-/shrinkpng-1.2.0-beta.1.tgz",
+      "integrity": "sha512-14B3Na+thQHyXkz1cMXKcMQ/mYBCJFWck1Z5z3NzmQqF5x712vuM9WWt2g/2V6/+ZYUA40FQLyNl6Q9TcffdEw==",
+      "requires": {
+        "@babel/runtime-corejs3": "^7.18.3",
+        "pako": "^2.0.4",
+        "uzip": "^0.20201231.0"
+      }
+    },
     "side-channel": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
@@ -10225,6 +10309,11 @@
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
       "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg=="
     },
+    "uzip": {
+      "version": "0.20201231.0",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/uzip/-/uzip-0.20201231.0.tgz",
+      "integrity": "sha512-OZeJfZP+R0z9D6TmBgLq2LHzSSptGMGDGigGiEe0pr8UBe/7fdflgHlHBNDASTXB5jnFuxHpNaJywSg8YFeGng=="
+    },
     "vant": {
       "version": "4.8.10",
       "resolved": "https://mirrors.cloud.tencent.com/npm/vant/-/vant-4.8.10.tgz",
--- a/package.json
View file @5063c70
+++ b/package.json
View file @5063c70
@@ -31,6 +31,7 @@
     "moment": "^2.29.3",
     "mui-player": "^1.6.0",
     "recorder-core": "^1.3.23122400",
+    "shrinkpng": "^1.2.0-beta.1",
     "typescript": "^4.7.3",
     "uuid": "^8.3.2",
     "vant": "^4.8.10",
--- a/src/views/fxPark/poster.vue
View file @5063c70
+++ b/src/views/fxPark/poster.vue
View file @5063c70
@@ -63,6 +63,7 @@ import { Cookies, $, _, axios, storeToRefs, mainStore, Toast, useTitle } from '@
 //import { } from '@/utils/generateModules.js'
 //import { } from '@/utils/generateIcons.js'
 //import { } from '@/composables'
+import { shrinkImage } from "shrinkpng"
 const $route = useRoute();
 const $router = useRouter();
@@ -124,6 +125,7 @@ const goToIndex = () => { // 返回首页
 }
 const posterPrev = () => { // 上一个
+  if (upload_loading.value) return false;
   if (posterIndex.value > 0) {
     posterIndex.value--;
   } else {
@@ -133,6 +135,7 @@ const posterPrev = () => { // 上一个
 };
 const posterNext = () => { // 下一个
+  if (upload_loading.value) return false;
   if (posterIndex.value < raw_data.value.length - 1) {
     posterIndex.value++;
   } else {
@@ -188,6 +191,12 @@ const createImage = () => {
 const upload_loading = ref(false);
+const compressImg = (file) => { // 图片压缩
+  return shrinkImage(file, {
+    quality: 15
+  });
+}
+
 const beforeRead = (file) => {
   if (file.type.indexOf('image') < 0) {
     showToast('请上传图片格式');
@@ -199,7 +208,7 @@ const beforeRead = (file) => {
   //   return false;
   // }
-  return true;
+  return compressImg(file);
 };
 const afterRead = async (res) => {
--- a/yarn.lock
View file @5063c70
+++ b/yarn.lock
View file @5063c70
@@ -43,6 +43,14 @@
   "resolved" "https://mirrors.cloud.tencent.com/npm/@babel/parser/-/parser-7.23.6.tgz"
   "version" "7.23.6"
+"@babel/runtime-corejs3@^7.18.3":
+  "integrity" "sha512-VOQOexSilscN24VEY810G/PqtpFvx/z6UqDIjIWbDe2368HhDLkYN5TYwaEz/+eRCUkhJ2WaNLLmQAlxzfWj4w=="
+  "resolved" "https://mirrors.cloud.tencent.com/npm/@babel/runtime-corejs3/-/runtime-corejs3-7.24.4.tgz"
+  "version" "7.24.4"
+  dependencies:
+    "core-js-pure" "^3.30.2"
+    "regenerator-runtime" "^0.14.0"
+
 "@babel/runtime@^7.17.2":
   "integrity" "sha512-zHd0eUrf5GZoOWVCXp6koAKQTfZV07eit6bGPmJgnZdnSAvvZee6zniW2XMF7Cmc4ISOOnPy3QaSiIJGJkVEDQ=="
   "resolved" "https://mirrors.cloud.tencent.com/npm/@babel/runtime/-/runtime-7.23.6.tgz"
@@ -930,6 +938,11 @@
   "resolved" "https://mirrors.cloud.tencent.com/npm/copy-text-to-clipboard/-/copy-text-to-clipboard-3.2.0.tgz"
   "version" "3.2.0"
+"core-js-pure@^3.30.2":
+  "integrity" "sha512-d3BrpyFr5eD4KcbRvQ3FTUx/KWmaDesr7+a3+1+P46IUnNoEt+oiLijPINZMEon7w9oGkIINWxrBAU9DEciwFQ=="
+  "resolved" "https://mirrors.cloud.tencent.com/npm/core-js-pure/-/core-js-pure-3.37.0.tgz"
+  "version" "3.37.0"
+
 "core-js@^3.11.0", "core-js@^3.22.3":
   "integrity" "sha512-aDdvlDder8QmY91H88GzNi9EtQi2TjvQhpCX6B1v/dAZHU1AuLgHvRh54RiOerpEhEW46Tkf+vgAViB/CWC0ag=="
   "resolved" "https://mirrors.cloud.tencent.com/npm/core-js/-/core-js-3.34.0.tgz"
@@ -2377,6 +2390,11 @@
   dependencies:
     "aggregate-error" "^3.0.0"
+"pako@^2.0.4":
+  "integrity" "sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug=="
+  "resolved" "https://mirrors.cloud.tencent.com/npm/pako/-/pako-2.1.0.tgz"
+  "version" "2.1.0"
+
 "param-case@^3.0.4":
   "integrity" "sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A=="
   "resolved" "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz"
@@ -2777,6 +2795,15 @@
   "resolved" "https://mirrors.cloud.tencent.com/npm/shebang-regex/-/shebang-regex-3.0.0.tgz"
   "version" "3.0.0"
+"shrinkpng@^1.2.0-beta.1":
+  "integrity" "sha512-14B3Na+thQHyXkz1cMXKcMQ/mYBCJFWck1Z5z3NzmQqF5x712vuM9WWt2g/2V6/+ZYUA40FQLyNl6Q9TcffdEw=="
+  "resolved" "https://mirrors.cloud.tencent.com/npm/shrinkpng/-/shrinkpng-1.2.0-beta.1.tgz"
+  "version" "1.2.0-beta.1"
+  dependencies:
+    "@babel/runtime-corejs3" "^7.18.3"
+    "pako" "^2.0.4"
+    "uzip" "^0.20201231.0"
+
 "side-channel@^1.0.4":
   "integrity" "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw=="
   "resolved" "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz"
@@ -3200,6 +3227,11 @@
   "resolved" "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz"
   "version" "8.3.2"
+"uzip@^0.20201231.0":
+  "integrity" "sha512-OZeJfZP+R0z9D6TmBgLq2LHzSSptGMGDGigGiEe0pr8UBe/7fdflgHlHBNDASTXB5jnFuxHpNaJywSg8YFeGng=="
+  "resolved" "https://mirrors.cloud.tencent.com/npm/uzip/-/uzip-0.20201231.0.tgz"
+  "version" "0.20201231.0"
+
 "vant@^4.8.10":
   "integrity" "sha512-JKfywSAwxVrY6q2KbESdW9IyGMeOFKa8ub3DLluTaYV7ff4ECXFilkjMeRYVT4hdsNcNii6KCQF6mUYyI56SBA=="
   "resolved" "https://mirrors.cloud.tencent.com/npm/vant/-/vant-4.8.10.tgz"