From 009ec2853c6573d852f8bd084515e9fbef179e6f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=AE=87=E9=98=B3?= <3311118881@qq.com> Date: Thu, 22 Aug 2024 13:39:56 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E5=9B=BE=E7=89=87=E5=8E=8B?= =?UTF-8?q?=E7=BC=A9=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 29 +++++++++++ package.json | 1 + src/components/FileUpload/index.tsx | 78 +++++++++++++++++++++++++---- src/pages/Swiper/index.tsx | 12 +++-- src/utils/index.ts | 2 +- 5 files changed, 107 insertions(+), 15 deletions(-) diff --git a/package-lock.json b/package-lock.json index 9fca721..c4e50b8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,6 +11,7 @@ "antd": "^5.19.3", "apexcharts": "^3.41.0", "axios": "^1.7.2", + "compressorjs": "^1.2.1", "dicebear": "^9.2.1", "flatpickr": "^4.6.13", "headlessui": "^0.0.0", @@ -2770,6 +2771,12 @@ "node": ">=8" } }, + "node_modules/blueimp-canvas-to-blob": { + "version": "3.29.0", + "resolved": "https://registry.npmmirror.com/blueimp-canvas-to-blob/-/blueimp-canvas-to-blob-3.29.0.tgz", + "integrity": "sha512-0pcSSGxC0QxT+yVkivxIqW0Y4VlO2XSDPofBAqoJ1qJxgH9eiUDLv50Rixij2cDuEfx4M6DpD9UGZpRhT5Q8qg==", + "license": "MIT" + }, "node_modules/boxen": { "version": "7.1.1", "resolved": "https://registry.npmmirror.com/boxen/-/boxen-7.1.1.tgz", @@ -3264,6 +3271,16 @@ "node": ">= 6" } }, + "node_modules/compressorjs": { + "version": "1.2.1", + "resolved": "https://registry.npmmirror.com/compressorjs/-/compressorjs-1.2.1.tgz", + "integrity": "sha512-+geIjeRnPhQ+LLvvA7wxBQE5ddeLU7pJ3FsKFWirDw6veY3s9iLxAQEw7lXGHnhCJvBujEQWuNnGzZcvCvdkLQ==", + "license": "MIT", + "dependencies": { + "blueimp-canvas-to-blob": "^3.29.0", + "is-blob": "^2.1.0" + } + }, "node_modules/compute-gcd": { "version": "1.2.1", "resolved": "https://registry.npmmirror.com/compute-gcd/-/compute-gcd-1.2.1.tgz", @@ -4230,6 +4247,18 @@ "node": ">=8" } }, + "node_modules/is-blob": { + "version": "2.1.0", + "resolved": "https://registry.npmmirror.com/is-blob/-/is-blob-2.1.0.tgz", + "integrity": "sha512-SZ/fTft5eUhQM6oF/ZaASFDEdbFVe89Imltn9uZr03wdKMcWNVYSMjQPFtg05QuNkt5l5c135ElvXEQG0rk4tw==", + "license": "MIT", + "engines": { + "node": ">=6" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/is-ci": { "version": "3.0.1", "resolved": "https://registry.npmmirror.com/is-ci/-/is-ci-3.0.1.tgz", diff --git a/package.json b/package.json index 17ac337..1644bd0 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "antd": "^5.19.3", "apexcharts": "^3.41.0", "axios": "^1.7.2", + "compressorjs": "^1.2.1", "dicebear": "^9.2.1", "flatpickr": "^4.6.13", "headlessui": "^0.0.0", diff --git a/src/components/FileUpload/index.tsx b/src/components/FileUpload/index.tsx index 6155217..43dbf56 100644 --- a/src/components/FileUpload/index.tsx +++ b/src/components/FileUpload/index.tsx @@ -1,9 +1,11 @@ import { FileDir } from '@/types/app/file'; import { InboxOutlined } from '@ant-design/icons'; import type { UploadProps } from 'antd'; -import { message, Modal, Upload } from 'antd'; -import { useUserStore } from '@/stores' -import { baseURL } from '@/utils/request' +import { message, Modal, Radio, Select, Upload } from 'antd'; +import { useUserStore } from '@/stores'; +import { baseURL } from '@/utils/request'; +import Compressor from 'compressorjs'; +import { useState } from 'react'; const { Dragger } = Upload; @@ -15,7 +17,9 @@ interface UploadFileProps { } export default ({ dir, open, onCancel, onSuccess }: UploadFileProps) => { - const store = useUserStore() + const store = useUserStore(); + const [quality, setQuality] = useState(1000); + const [isCompressionUpload, setIsCompressionUpload] = useState(false); const uploadProps: UploadProps = { name: 'files', @@ -25,28 +29,80 @@ export default ({ dir, open, onCancel, onSuccess }: UploadFileProps) => { headers: { "Authorization": `Bearer ${store.token}` }, + // 上传之前触发 + beforeUpload: async (file) => { + if (quality === 1000) return file + + // 对图片进行压缩处理 + return new Promise((resolve, reject) => { + new Compressor(file, { + quality, + success: (file) => { + resolve(file); + }, + error: (err) => { + reject(err); + }, + }); + }) + }, onChange(info) { const { status } = info.file; let res; if (status !== 'uploading') { - res = info?.file?.response + res = info?.file?.response; - if (res.code === 400) return message.error(res.message) + if (res?.code === 400) return message.error(res.message); } if (status === 'done') { message.success(`文件上传成功`); - onSuccess() + onSuccess(); } else if (status === 'error') { - message.error(`文件上传失败：${res.message}`); + message.error(`文件上传失败：${res?.message}`); } }, className: "py-4" }; + // 初始化操作 + const onCloseModel = () => { + setIsCompressionUpload(false); + setQuality(1000); + onCancel(); + } + return ( <> - + +
+ setIsCompressionUpload(e.target.value ? true : false)}> + 无损上传 + 压缩上传 + + + { + isCompressionUpload && + } /> diff --git a/src/utils/index.ts b/src/utils/index.ts index deab4bd..8e3177e 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -30,4 +30,4 @@ export const getListAPI = (api: string) => { }); } } -}; +}; \ No newline at end of file