From 9f96e99ad791808f0529a2ad59e1162ca0651aef Mon Sep 17 00:00:00 2001
From: xingyu <xingyu4j@vip.qq.com>
Date: Fri, 4 Aug 2023 20:03:39 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0CropperAvatar?=
=?UTF-8?q?=E7=BB=84=E4=BB=B6=E5=9B=BE=E7=89=87=E4=B8=8A=E4=BC=A0=E5=A4=A7?=
=?UTF-8?q?=E5=B0=8F=E9=99=90=E5=88=B6=E9=BB=98=E8=AE=A4=E6=9C=80=E5=A4=A7?=
=?UTF-8?q?5M?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/Cropper/src/CopperModal.vue | 7 ++++++-
src/components/Cropper/src/CropperAvatar.vue | 3 ++-
src/locales/lang/en/component.ts | 1 +
src/locales/lang/zh-CN/component.ts | 1 +
4 files changed, 10 insertions(+), 2 deletions(-)
diff --git a/src/components/Cropper/src/CopperModal.vue b/src/components/Cropper/src/CopperModal.vue
index 5903498c..27a3cccb 100644
--- a/src/components/Cropper/src/CopperModal.vue
+++ b/src/components/Cropper/src/CopperModal.vue
@@ -17,9 +17,10 @@ const props = defineProps({
type: Function as PropType<(params: apiFunParams) => Promise<any>>,
},
src: { type: String },
+ size: { type: Number },
})
-const emit = defineEmits(['uploadSuccess', 'register'])
+const emit = defineEmits(['uploadSuccess', 'uploadError', 'register'])
interface apiFunParams { file: Blob; name: string; filename: string }
@@ -36,6 +37,10 @@ const { t } = useI18n()
// 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/components/Cropper/src/CropperAvatar.vue b/src/components/Cropper/src/CropperAvatar.vue
index 363f52bd..8920d53c 100644
--- a/src/components/Cropper/src/CropperAvatar.vue
+++ b/src/components/Cropper/src/CropperAvatar.vue
@@ -18,6 +18,7 @@ const props = defineProps({
btnProps: { type: Object as PropType<ButtonProps> },
btnText: { type: String, default: '' },
uploadApi: { type: Function as PropType<({ file, name }) => Promise<void>> },
+ size: { type: Number, default: 5 },
})
const emit = defineEmits(['update:value', 'change'])
@@ -70,7 +71,7 @@ defineExpose({ openModal: openModal.bind(null, true), closeModal })
{{ btnText ? btnText : t('component.cropper.selectImage') }}
</a-button>
- <CopperModal :upload-api="uploadApi" :src="sourceValue" @register="register" @upload-success="handleUploadSuccess" />
+ <CopperModal :upload-api="uploadApi" :src="sourceValue" :size="size" @register="register" @upload-success="handleUploadSuccess" />
</div>
</template>
diff --git a/src/locales/lang/en/component.ts b/src/locales/lang/en/component.ts
index 15277ea4..6a53c689 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 2d998aa8..0d2a5aed 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: '重置',