Commit 16b4b6d57c9781773c7454a66f7e5518880971b9
Committed by
GitHub
GitHub
1 parent
c28224f3
fit: 增加CropperAvatar组件图片上传大小限制默认最大5M (#2928)
Co-authored-by: doverlee <doverlee@fox.mail.com>
Showing
4 changed files
with
10 additions
and
1 deletions
src/components/Cropper/src/CropperAvatar.vue
| ... | ... | @@ -25,6 +25,7 @@ |
| 25 | 25 | @upload-success="handleUploadSuccess" |
| 26 | 26 | :uploadApi="uploadApi" |
| 27 | 27 | :src="sourceValue" |
| 28 | + :size="size" | |
| 28 | 29 | /> |
| 29 | 30 | </div> |
| 30 | 31 | </template> |
| ... | ... | @@ -54,6 +55,7 @@ |
| 54 | 55 | btnProps: { type: Object as PropType<ButtonProps> }, |
| 55 | 56 | btnText: { type: String, default: '' }, |
| 56 | 57 | uploadApi: { type: Function as PropType<({ file: Blob, name: string }) => Promise<void>> }, |
| 58 | + size: { type: Number, default: 5 }, | |
| 57 | 59 | }; |
| 58 | 60 | |
| 59 | 61 | export default defineComponent({ | ... | ... |
src/components/Cropper/src/CropperModal.vue
| ... | ... | @@ -130,13 +130,14 @@ |
| 130 | 130 | type: Function as PropType<(params: apiFunParams) => Promise<any>>, |
| 131 | 131 | }, |
| 132 | 132 | src: { type: String }, |
| 133 | + size: { type: Number }, | |
| 133 | 134 | }; |
| 134 | 135 | |
| 135 | 136 | export default defineComponent({ |
| 136 | 137 | name: 'CropperModal', |
| 137 | 138 | components: { BasicModal, Space, CropperImage, Upload, Avatar, Tooltip }, |
| 138 | 139 | props, |
| 139 | - emits: ['uploadSuccess', 'register'], | |
| 140 | + emits: ['uploadSuccess', 'uploadError', 'register'], | |
| 140 | 141 | setup(props, { emit }) { |
| 141 | 142 | let filename = ''; |
| 142 | 143 | const src = ref(props.src || ''); |
| ... | ... | @@ -151,6 +152,10 @@ |
| 151 | 152 | |
| 152 | 153 | // Block upload |
| 153 | 154 | function handleBeforeUpload(file: File) { |
| 155 | + if (props.size && file.size > 1024 * 1024 * props.size) { | |
| 156 | + emit('uploadError', { msg: t('component.cropper.imageTooBig') }); | |
| 157 | + return; | |
| 158 | + } | |
| 154 | 159 | const reader = new FileReader(); |
| 155 | 160 | reader.readAsDataURL(file); |
| 156 | 161 | src.value = ''; | ... | ... |
src/locales/lang/en/component.ts