Commit 16b4b6d57c9781773c7454a66f7e5518880971b9
Committed by
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,6 +25,7 @@ | ||
25 | @upload-success="handleUploadSuccess" | 25 | @upload-success="handleUploadSuccess" |
26 | :uploadApi="uploadApi" | 26 | :uploadApi="uploadApi" |
27 | :src="sourceValue" | 27 | :src="sourceValue" |
28 | + :size="size" | ||
28 | /> | 29 | /> |
29 | </div> | 30 | </div> |
30 | </template> | 31 | </template> |
@@ -54,6 +55,7 @@ | @@ -54,6 +55,7 @@ | ||
54 | btnProps: { type: Object as PropType<ButtonProps> }, | 55 | btnProps: { type: Object as PropType<ButtonProps> }, |
55 | btnText: { type: String, default: '' }, | 56 | btnText: { type: String, default: '' }, |
56 | uploadApi: { type: Function as PropType<({ file: Blob, name: string }) => Promise<void>> }, | 57 | uploadApi: { type: Function as PropType<({ file: Blob, name: string }) => Promise<void>> }, |
58 | + size: { type: Number, default: 5 }, | ||
57 | }; | 59 | }; |
58 | 60 | ||
59 | export default defineComponent({ | 61 | export default defineComponent({ |
src/components/Cropper/src/CropperModal.vue
@@ -130,13 +130,14 @@ | @@ -130,13 +130,14 @@ | ||
130 | type: Function as PropType<(params: apiFunParams) => Promise<any>>, | 130 | type: Function as PropType<(params: apiFunParams) => Promise<any>>, |
131 | }, | 131 | }, |
132 | src: { type: String }, | 132 | src: { type: String }, |
133 | + size: { type: Number }, | ||
133 | }; | 134 | }; |
134 | 135 | ||
135 | export default defineComponent({ | 136 | export default defineComponent({ |
136 | name: 'CropperModal', | 137 | name: 'CropperModal', |
137 | components: { BasicModal, Space, CropperImage, Upload, Avatar, Tooltip }, | 138 | components: { BasicModal, Space, CropperImage, Upload, Avatar, Tooltip }, |
138 | props, | 139 | props, |
139 | - emits: ['uploadSuccess', 'register'], | 140 | + emits: ['uploadSuccess', 'uploadError', 'register'], |
140 | setup(props, { emit }) { | 141 | setup(props, { emit }) { |
141 | let filename = ''; | 142 | let filename = ''; |
142 | const src = ref(props.src || ''); | 143 | const src = ref(props.src || ''); |
@@ -151,6 +152,10 @@ | @@ -151,6 +152,10 @@ | ||
151 | 152 | ||
152 | // Block upload | 153 | // Block upload |
153 | function handleBeforeUpload(file: File) { | 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 | const reader = new FileReader(); | 159 | const reader = new FileReader(); |
155 | reader.readAsDataURL(file); | 160 | reader.readAsDataURL(file); |
156 | src.value = ''; | 161 | src.value = ''; |
src/locales/lang/en/component.ts
@@ -11,6 +11,7 @@ export default { | @@ -11,6 +11,7 @@ export default { | ||
11 | cropper: { | 11 | cropper: { |
12 | selectImage: 'Select Image', | 12 | selectImage: 'Select Image', |
13 | uploadSuccess: 'Uploaded success!', | 13 | uploadSuccess: 'Uploaded success!', |
14 | + imageTooBig: 'Image too big', | ||
14 | modalTitle: 'Avatar upload', | 15 | modalTitle: 'Avatar upload', |
15 | okText: 'Confirm and upload', | 16 | okText: 'Confirm and upload', |
16 | btn_reset: 'Reset', | 17 | btn_reset: 'Reset', |
src/locales/lang/zh-CN/component.ts
@@ -11,6 +11,7 @@ export default { | @@ -11,6 +11,7 @@ export default { | ||
11 | cropper: { | 11 | cropper: { |
12 | selectImage: '选择图片', | 12 | selectImage: '选择图片', |
13 | uploadSuccess: '上传成功', | 13 | uploadSuccess: '上传成功', |
14 | + imageTooBig: '图片超限', | ||
14 | modalTitle: '头像上传', | 15 | modalTitle: '头像上传', |
15 | okText: '确认并上传', | 16 | okText: '确认并上传', |
16 | btn_reset: '重置', | 17 | btn_reset: '重置', |