From fe3874396d594a5624dff40425ca2a97c742e119 Mon Sep 17 00:00:00 2001
From: fengheguai <923553443@qq.com>
Date: 星期四, 25 一月 2024 12:50:45 +0800
Subject: [PATCH] 图片上传组件增加压缩功能支持，可自行开关
---
src/components/ImageUpload/index.vue | 22 +++++++++++++++++++---
package.json | 1 +
2 files changed, 20 insertions(+), 3 deletions(-)
diff --git a/package.json b/package.json
index 5e61e31..861f30c 100644
--- a/package.json
+++ b/package.json
@@ -30,6 +30,7 @@
"element-plus": "2.4.4",
"file-saver": "2.0.5",
"fuse.js": "7.0.0",
+ "image-conversion": "^2.1.1",
"js-cookie": "3.0.5",
"jsencrypt": "3.3.2",
"nprogress": "0.2.0",
diff --git a/src/components/ImageUpload/index.vue b/src/components/ImageUpload/index.vue
index ae5cd45..1c6dcd1 100644
--- a/src/components/ImageUpload/index.vue
+++ b/src/components/ImageUpload/index.vue
@@ -44,6 +44,7 @@
import { OssVO } from '@/api/system/oss/types';
import { propTypes } from '@/utils/propTypes';
import { globalHeaders } from '@/utils/request';
+import { compressAccurately } from 'image-conversion';
const props = defineProps({
modelValue: {
@@ -60,7 +61,14 @@
isShowTip: {
type: Boolean,
default: true
- }
+ },
+ // 鏄惁鏀寔鍘嬬缉锛岄粯璁ゅ惁
+ compressSupport: {
+ type: Boolean,
+ default: false
+ },
+ // 鍘嬬缉鐩爣澶у皬锛屽崟浣岾B銆傞粯璁�300KB浠ヤ笂鏂囦欢鎵嶅帇缂╋紝骞跺帇缂╄嚦300KB浠ュ唴
+ compressTargetSize: propTypes.number.def(300)
});
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
@@ -138,8 +146,16 @@
return false;
}
}
- proxy?.$modal.loading('姝ｅ湪涓婁紶鍥剧墖锛岃绋嶅��...');
- number.value++;
+
+ //鍘嬬缉鍥剧墖锛屽紑鍚帇缂╁苟涓斿ぇ浜庢寚瀹氱殑鍘嬬缉澶у皬鏃舵墠鍘嬬缉
+ if (props.compressSupport && file.size / 1024 > props.compressTargetSize) {
+ proxy?.$modal.loading('姝ｅ湪涓婁紶鍥剧墖锛岃绋嶅��...');
+ number.value++;
+ return compressAccurately(file, props.compressTargetSize);
+ } else {
+ proxy?.$modal.loading('姝ｅ湪涓婁紶鍥剧墖锛岃绋嶅��...');
+ number.value++;
+ }
};
// 鏂囦欢涓暟瓒呭嚭
--
Gitblit v1.9.3