admin123
/
shop-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

在handle.vue和submit.vue文件中引入compressorjs库，对上传的图片进行压缩处理，设置压缩质量为0.8，最大宽度和高度为1280像素，以减少上传文件大小并提升上传效率
This commit is contained in:
dzq 2025-04-19 11:12:02 +08:00
parent e383337642
commit 5c89ba97c4
4 changed files with 75 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -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",

22
pnpm-lock.yaml
View File

@ -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

27
src/pages/approval/handle.vue
View File

@ -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

31
src/pages/approval/submit.vue
View File

@ -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 = '上传中...'
const file = item.file as File
const formData = new FormData()
formData.append('file', file)
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', compressedFile);
const { data } = await axios.post<{
code: number