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" /> @@ -54,6 +55,7 @@ btnProps: { type: Object as PropType }, btnText: { type: String, default: '' }, uploadApi: { type: Function as PropType<({ file: Blob, name: string }) => Promise> }, + 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>, }, 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: '重置',