Commit a5fae4a973655388bd3e76088fc5936aef1c3a90
1 parent
942d776b
fix: bug DEFECT-402 image upload problem
新增图片上传大小验证 && 上传按钮loading
Showing
1 changed file
with
18 additions
and
2 deletions
| ... | ... | @@ -3,6 +3,7 @@ |
| 3 | 3 | <Upload |
| 4 | 4 | name="file" |
| 5 | 5 | multiple |
| 6 | + :beforeUpload="handleBeforeUpload" | |
| 6 | 7 | @change="handleChange" |
| 7 | 8 | :action="uploadUrl" |
| 8 | 9 | :showUploadList="false" |
| ... | ... | @@ -16,9 +17,9 @@ |
| 16 | 17 | </div> |
| 17 | 18 | </template> |
| 18 | 19 | <script lang="ts"> |
| 19 | - import { defineComponent, computed } from 'vue'; | |
| 20 | + import { defineComponent, computed, ref, unref } from 'vue'; | |
| 20 | 21 | |
| 21 | - import { Upload } from 'ant-design-vue'; | |
| 22 | + import { message, Upload } from 'ant-design-vue'; | |
| 22 | 23 | import { useDesign } from '/@/hooks/web/useDesign'; |
| 23 | 24 | import { useGlobSetting } from '/@/hooks/setting'; |
| 24 | 25 | import { useI18n } from '/@/hooks/web/useI18n'; |
| ... | ... | @@ -43,15 +44,18 @@ |
| 43 | 44 | const { uploadUrl } = useGlobSetting(); |
| 44 | 45 | const { t } = useI18n(); |
| 45 | 46 | const { prefixCls } = useDesign('tinymce-img-upload'); |
| 47 | + const loading = ref(false); | |
| 46 | 48 | |
| 47 | 49 | const getButtonProps = computed(() => { |
| 48 | 50 | const { disabled } = props; |
| 49 | 51 | return { |
| 52 | + loading: unref(loading), | |
| 50 | 53 | disabled, |
| 51 | 54 | }; |
| 52 | 55 | }); |
| 53 | 56 | |
| 54 | 57 | function handleChange(info: Recordable) { |
| 58 | + console.log(info); | |
| 55 | 59 | const file = info.file; |
| 56 | 60 | const status = file?.status; |
| 57 | 61 | const url = file?.response?.fileStaticUri; |
| ... | ... | @@ -60,17 +64,28 @@ |
| 60 | 64 | if (status === 'uploading') { |
| 61 | 65 | if (!uploading) { |
| 62 | 66 | emit('uploading', name); |
| 67 | + loading.value = true; | |
| 63 | 68 | uploading = true; |
| 64 | 69 | } |
| 65 | 70 | } else if (status === 'done') { |
| 66 | 71 | emit('done', name, url); |
| 72 | + loading.value = false; | |
| 67 | 73 | uploading = false; |
| 68 | 74 | } else if (status === 'error') { |
| 69 | 75 | emit('error'); |
| 76 | + loading.value = false; | |
| 70 | 77 | uploading = false; |
| 71 | 78 | } |
| 72 | 79 | } |
| 73 | 80 | |
| 81 | + function handleBeforeUpload(file: File) { | |
| 82 | + if (file.size > 5 * 1024 * 1024) { | |
| 83 | + message.error('上传图片的大小不能超过5MB!'); | |
| 84 | + return false; | |
| 85 | + } | |
| 86 | + return true; | |
| 87 | + } | |
| 88 | + | |
| 74 | 89 | return { |
| 75 | 90 | prefixCls, |
| 76 | 91 | handleChange, |
| ... | ... | @@ -78,6 +93,7 @@ |
| 78 | 93 | t, |
| 79 | 94 | getButtonProps, |
| 80 | 95 | token, |
| 96 | + handleBeforeUpload, | |
| 81 | 97 | }; |
| 82 | 98 | }, |
| 83 | 99 | }); | ... | ... |