diff --git a/package.json b/package.json index 821a2d6..9b7bc7f 100644 --- a/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 8405ed3..836ac3e 100644 --- a/pnpm-lock.yaml +++ b/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 diff --git a/src/pages/approval/handle.vue b/src/pages/approval/handle.vue index e7b0c98..b89cd0c 100644 --- a/src/pages/approval/handle.vue +++ b/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((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 diff --git a/src/pages/approval/submit.vue b/src/pages/approval/submit.vue index 90319b6..2caba07 100644 --- a/src/pages/approval/submit.vue +++ b/src/pages/approval/submit.vue @@ -1,5 +1,6 @@