feat(图片上传): 添加图片压缩功能以减少上传文件大小

在handle.vue和submit.vue文件中引入compressorjs库，对上传的图片进行压缩处理，设置压缩质量为0.8，最大宽度和高度为1280像素，以减少上传文件大小并提升上传效率

package.json

@@ -17,6 +17,7 @@
   "dependencies": {
     "@vant/touch-emulator": "1.4.0",
     "axios": "1.7.9",
+    "compressorjs": "1.2.1",
     "dayjs": "1.11.13",
     "js-cookie": "3.0.5",
     "lodash-es": "4.17.21",

pnpm-lock.yaml

@@ -14,6 +14,9 @@ importers:
       axios:
         specifier: 1.7.9
         version: 1.7.9
+      compressorjs:
+        specifier: 1.2.1
+        version: 1.2.1
       dayjs:
         specifier: 1.11.13
         version: 1.11.13
@@ -1801,6 +1804,9 @@ packages:
   birpc@0.2.19:
     resolution: {integrity: sha512-5WeXXAvTmitV1RqJFppT5QtUiz2p1mRSYU000Jkft5ZUCLJIk4uQriYNO50HknxKwM6jd8utNc66K1qGIwwWBQ==}
 
+  blueimp-canvas-to-blob@3.29.0:
+    resolution: {integrity: sha512-0pcSSGxC0QxT+yVkivxIqW0Y4VlO2XSDPofBAqoJ1qJxgH9eiUDLv50Rixij2cDuEfx4M6DpD9UGZpRhT5Q8qg==}
+
   boolbase@1.0.0:
     resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==}
 
@@ -1929,6 +1935,9 @@ packages:
     resolution: {integrity: sha512-buhp5kePrmda3vhc5B9t7pUQXAb2Tnd0qgpkIhPhkHXxJpiPJ11H0ZEU0oBpJ2QztSbzG/ZxMj/CHsYJqRHmyg==}
     engines: {node: '>= 12.0.0'}
 
+  compressorjs@1.2.1:
+    resolution: {integrity: sha512-+geIjeRnPhQ+LLvvA7wxBQE5ddeLU7pJ3FsKFWirDw6veY3s9iLxAQEw7lXGHnhCJvBujEQWuNnGzZcvCvdkLQ==}
+
   concat-map@0.0.1:
     resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
 
@@ -2580,6 +2589,10 @@ packages:
     resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
     engines: {node: '>=8'}
 
+  is-blob@2.1.0:
+    resolution: {integrity: sha512-SZ/fTft5eUhQM6oF/ZaASFDEdbFVe89Imltn9uZr03wdKMcWNVYSMjQPFtg05QuNkt5l5c135ElvXEQG0rk4tw==}
+    engines: {node: '>=6'}
+
   is-builtin-module@4.0.0:
     resolution: {integrity: sha512-rWP3AMAalQSesXO8gleROyL2iKU73SX5Er66losQn9rWOWL4Gef0a/xOEOVqjWGMuR2vHG3FJ8UUmT700O8oFg==}
     engines: {node: '>=18.20'}
@@ -5501,6 +5514,8 @@ snapshots:
 
   birpc@0.2.19: {}
 
+  blueimp-canvas-to-blob@3.29.0: {}
+
   boolbase@1.0.0: {}
 
   brace-expansion@1.1.11:
@@ -5619,6 +5634,11 @@ snapshots:
 
   comment-parser@1.4.1: {}
 
+  compressorjs@1.2.1:
+    dependencies:
+      blueimp-canvas-to-blob: 3.29.0
+      is-blob: 2.1.0
+
   concat-map@0.0.1: {}
 
   confbox@0.1.8: {}
@@ -6400,6 +6420,8 @@ snapshots:
     dependencies:
       binary-extensions: 2.3.0
 
+  is-blob@2.1.0: {}
+
   is-builtin-module@4.0.0:
     dependencies:
       builtin-modules: 4.0.0

src/pages/approval/handle.vue

@@ -7,7 +7,8 @@ import { openCabinetApi } from '@/common/apis/shop'
 import type { HandleApprovalRequestData } from '@/common/apis/approval/type'
 import { useRoute, useRouter } from 'vue-router'
 import { useApprovalStore } from '@/pinia/stores/approval'
-import { useWxStore } from '@/pinia/stores/wx'
+import { useWxStore } from '@/pinia/stores/wx';
+import Compressor from 'compressorjs';
 
 const { VITE_APP_BASE_API } = import.meta.env;
 const router = useRouter()
@@ -77,8 +78,30 @@ const handleFileUpload = async (items: UploaderFileListItem | UploaderFileListIt
             item.status = 'uploading'
             item.message = '上传中...'
             const file = item.file as File
+            let compressedFile = file;
+            try {
+                compressedFile = await new Promise<File>((resolve, reject) => {
+                    new Compressor(file, {
+                        quality: 0.8,
+                        maxWidth: 1280,
+                        maxHeight: 1280,
+                        success(result) {
+                            resolve(new File([result], file.name, {
+                                type: 'image/jpeg',
+                                lastModified: Date.now()
+                            }))
+                        },
+                        error(err) {
+                            reject(err)
+                        }
+                    })
+                })
+            } catch (error) {
+                console.error('压缩失败:', error)
+            }
+
             const formData = new FormData()
-            formData.append('file', file)
+            formData.append('file', compressedFile)
 
             const { data } = await axios.post<{
                 code: number

src/pages/approval/submit.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, watch } from 'vue'
+import Compressor from 'compressorjs'
 import { showConfirmDialog, showSuccessToast, showToast, UploaderFileListItem } from 'vant'
 import axios from "axios"
 import { submitApprovalApi } from '@/common/apis/approval'
@@ -54,10 +55,32 @@ const handleFileUpload = async (items: UploaderFileListItem | UploaderFileListIt
     try {
         const uploadPromises = files.map(async (item) => {
             item.status = 'uploading'
-            item.message = '上传中...'
+            item.message = '上传中...';
-            const file = item.file as File
+            const file = item.file as File;
-            const formData = new FormData()
+            let compressedFile = file;
-            formData.append('file', file)
+            try {
+                compressedFile = await new Promise<File>((resolve, reject) => {
+                    new Compressor(file, {
+                        quality: 0.8,
+                        maxWidth: 1280,
+                        maxHeight: 1280,
+                        success(result) {
+                            resolve(new File([result], file.name, {
+                                type: 'image/jpeg',
+                                lastModified: Date.now()
+                            }))
+                        },
+                        error(err) {
+                            reject(err)
+                        }
+                    })
+                })
+            } catch (error) {
+                console.error('压缩失败:', error)
+            }
+
+            const formData = new FormData();
+            formData.append('file', compressedFile);
 
             const { data } = await axios.post<{
                 code: number