Commit dfb339c7a07e0b30c1b595db042b0b516f3d00e2
Merge branch 'ww' into 'main'
fix: bug DEFECT-402 image upload problem See merge request huang/yun-teng-iot-front!217
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 | }); | ... | ... |