feat: 增加CropperAvatar组件图片上传大小限制默认最大5M

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 = ''

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>
 

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',

src/locales/lang/zh-CN/component.ts

@@ -11,6 +11,7 @@ export default {
   cropper: {
     selectImage: '选择图片',
     uploadSuccess: '上传成功',
+    imageTooBig: '图片超限',
     modalTitle: '头像上传',
     okText: '确认并上传',
     btn_reset: '重置',