From 16b4b6d57c9781773c7454a66f7e5518880971b9 Mon Sep 17 00:00:00 2001
From: DoverDee <fdlijia@163.com>
Date: Wed, 26 Jul 2023 19:05:31 +0800
Subject: [PATCH] =?UTF-8?q?fit:=20=E5=A2=9E=E5=8A=A0CropperAvatar=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E5=9B=BE=E7=89=87=E4=B8=8A=E4=BC=A0=E5=A4=A7=E5=B0=8F?=
 =?UTF-8?q?=E9=99=90=E5=88=B6=E9=BB=98=E8=AE=A4=E6=9C=80=E5=A4=A75M=20(#29?=
 =?UTF-8?q?28)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: doverlee <doverlee@fox.mail.com>
---
 src/components/Cropper/src/CropperAvatar.vue | 2 ++
 src/components/Cropper/src/CropperModal.vue  | 7 ++++++-
 src/locales/lang/en/component.ts             | 1 +
 src/locales/lang/zh-CN/component.ts          | 1 +
 4 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/components/Cropper/src/CropperAvatar.vue b/src/components/Cropper/src/CropperAvatar.vue
index c6cc97c16..5c35de749 100644
--- a/src/components/Cropper/src/CropperAvatar.vue
+++ b/src/components/Cropper/src/CropperAvatar.vue
@@ -25,6 +25,7 @@
       @upload-success="handleUploadSuccess"
       :uploadApi="uploadApi"
       :src="sourceValue"
+      :size="size"
     />
   </div>
 </template>
@@ -54,6 +55,7 @@
     btnProps: { type: Object as PropType<ButtonProps> },
     btnText: { type: String, default: '' },
     uploadApi: { type: Function as PropType<({ file: Blob, name: string }) => Promise<void>> },
+    size: { type: Number, default: 5 },
   };
 
   export default defineComponent({
diff --git a/src/components/Cropper/src/CropperModal.vue b/src/components/Cropper/src/CropperModal.vue
index c9a08b86f..311a46e4b 100644
--- a/src/components/Cropper/src/CropperModal.vue
+++ b/src/components/Cropper/src/CropperModal.vue
@@ -130,13 +130,14 @@
       type: Function as PropType<(params: apiFunParams) => Promise<any>>,
     },
     src: { type: String },
+    size: { type: Number },
   };
 
   export default defineComponent({
     name: 'CropperModal',
     components: { BasicModal, Space, CropperImage, Upload, Avatar, Tooltip },
     props,
-    emits: ['uploadSuccess', 'register'],
+    emits: ['uploadSuccess', 'uploadError', 'register'],
     setup(props, { emit }) {
       let filename = '';
       const src = ref(props.src || '');
@@ -151,6 +152,10 @@
 
       // Block upload
       function handleBeforeUpload(file: File) {
+        if (props.size && file.size > 1024 * 1024 * props.size) {
+          emit('uploadError', { msg: t('component.cropper.imageTooBig') });
+          return;
+        }
         const reader = new FileReader();
         reader.readAsDataURL(file);
         src.value = '';
diff --git a/src/locales/lang/en/component.ts b/src/locales/lang/en/component.ts
index b93dbd548..ba66fa5b5 100644
--- a/src/locales/lang/en/component.ts
+++ b/src/locales/lang/en/component.ts
@@ -11,6 +11,7 @@ export default {
   cropper: {
     selectImage: 'Select Image',
     uploadSuccess: 'Uploaded success!',
+    imageTooBig: 'Image too big',
     modalTitle: 'Avatar upload',
     okText: 'Confirm and upload',
     btn_reset: 'Reset',
diff --git a/src/locales/lang/zh-CN/component.ts b/src/locales/lang/zh-CN/component.ts
index d9b54eb59..a29c59ba4 100644
--- a/src/locales/lang/zh-CN/component.ts
+++ b/src/locales/lang/zh-CN/component.ts
@@ -11,6 +11,7 @@ export default {
   cropper: {
     selectImage: '选择图片',
     uploadSuccess: '上传成功',
+    imageTooBig: '图片超限',
     modalTitle: '头像上传',
     okText: '确认并上传',
     btn_reset: '重置',