fix: bug DEFECT-402 image upload problem

新增图片上传大小验证 && 上传按钮loading

@@ -3,6 +3,7 @@
     <Upload
     <Upload
       name="file"
       name="file"
       multiple
       multiple
+      :beforeUpload="handleBeforeUpload"
       @change="handleChange"
       @change="handleChange"
       :action="uploadUrl"
       :action="uploadUrl"
       :showUploadList="false"
       :showUploadList="false"
@@ -16,9 +17,9 @@
   </div>
   </div>
 </template>
 </template>
 <script lang="ts">
 <script lang="ts">
-  import { defineComponent, computed } from 'vue';
+  import { defineComponent, computed, ref, unref } from 'vue';
 
 
-  import { Upload } from 'ant-design-vue';
+  import { message, Upload } from 'ant-design-vue';
   import { useDesign } from '/@/hooks/web/useDesign';
   import { useDesign } from '/@/hooks/web/useDesign';
   import { useGlobSetting } from '/@/hooks/setting';
   import { useGlobSetting } from '/@/hooks/setting';
   import { useI18n } from '/@/hooks/web/useI18n';
   import { useI18n } from '/@/hooks/web/useI18n';
@@ -43,15 +44,18 @@
       const { uploadUrl } = useGlobSetting();
       const { uploadUrl } = useGlobSetting();
       const { t } = useI18n();
       const { t } = useI18n();
       const { prefixCls } = useDesign('tinymce-img-upload');
       const { prefixCls } = useDesign('tinymce-img-upload');
+      const loading = ref(false);
 
 
       const getButtonProps = computed(() => {
       const getButtonProps = computed(() => {
         const { disabled } = props;
         const { disabled } = props;
         return {
         return {
+          loading: unref(loading),
           disabled,
           disabled,
         };
         };
       });
       });
 
 
       function handleChange(info: Recordable) {
       function handleChange(info: Recordable) {
+        console.log(info);
         const file = info.file;
         const file = info.file;
         const status = file?.status;
         const status = file?.status;
         const url = file?.response?.fileStaticUri;
         const url = file?.response?.fileStaticUri;
@@ -60,17 +64,28 @@
         if (status === 'uploading') {
         if (status === 'uploading') {
           if (!uploading) {
           if (!uploading) {
             emit('uploading', name);
             emit('uploading', name);
+            loading.value = true;
             uploading = true;
             uploading = true;
           }
           }
         } else if (status === 'done') {
         } else if (status === 'done') {
           emit('done', name, url);
           emit('done', name, url);
+          loading.value = false;
           uploading = false;
           uploading = false;
         } else if (status === 'error') {
         } else if (status === 'error') {
           emit('error');
           emit('error');
+          loading.value = false;
           uploading = false;
           uploading = false;
         }
         }
       }
       }
 
 
+      function handleBeforeUpload(file: File) {
+        if (file.size > 5 * 1024 * 1024) {
+          message.error('上传图片的大小不能超过5MB!');
+          return false;
+        }
+        return true;
+      }
+
       return {
       return {
         prefixCls,
         prefixCls,
         handleChange,
         handleChange,
@@ -78,6 +93,7 @@
         t,
         t,
         getButtonProps,
         getButtonProps,
         token,
         token,
+        handleBeforeUpload,
       };
       };
     },
     },
   });
   });