Commit 16b4b6d57c9781773c7454a66f7e5518880971b9

Authored by DoverDee
Committed by GitHub
1 parent c28224f3

fit: 增加CropperAvatar组件图片上传大小限制默认最大5M (#2928)

Co-authored-by: doverlee <doverlee@fox.mail.com>
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: '重置',