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 | }); | ... | ... |