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 +++++++++++++++++++---
1 files changed, 19 insertions(+), 3 deletions(-)
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