diff --git a/src/components/Cropper/src/CopperModal.vue b/src/components/Cropper/src/CopperModal.vue index 5903498..27a3ccc 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>, }, 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 363f52b..8920d53 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 }, btnText: { type: String, default: '' }, uploadApi: { type: Function as PropType<({ file, name }) => Promise> }, + 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') }} - + diff --git a/src/locales/lang/en/component.ts b/src/locales/lang/en/component.ts index 15277ea..6a53c68 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 2d998aa..0d2a5ae 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: '重置',