🚀 优化头像上传

src/views/system/user/userInfo/index.vue

@@ -79,8 +79,7 @@
           <BasicForm v-show="state.currentCardKey === 'baseInfo'" @register="registerForm"/>
           <AForm v-show="state.currentCardKey === 'uploadAvatar'"
                  ref="formElRef"
-                 :labelCol="{ style: { width: '120px' } }"
+                 class="upload-avatar-form"
-                 :wrapperCol="{ style: { width: '100%' } }"
                  :model="state.userInfo"
                  :scrollToFirstError="true"
                  @keypress.enter="handleSubmit"
@@ -90,8 +89,9 @@
                        class="avatar-uploader"
                        accept="image/*"
                        :multiple="false"
+                       :customRequest="handleUploadAvatar"
                        :show-upload-list="false"
-                       :before-upload="beforeUpload"
+                       :before-upload="handleBeforeUpload"
               >
                 <img v-if="state.imageUrl" :src="state.imageUrl">
                 <div v-else>
@@ -101,8 +101,11 @@
                 </div>
               </AUpload>
             </AFormItem>
-            <AFormItem>
+            <AFormItem :wrapperCol="{ style: { 'text-align': 'left' } }">
-              <a-button type="primary">保存</a-button>
+              <a-button preIcon="fa-regular:save"
+                        :loading="state.uploadAvatarBtnLoading"
+                        type="primary"
+              >保存</a-button>
             </AFormItem>
           </AForm>
         </ACard>
@@ -130,6 +133,7 @@
   interface InfoState {
     currentCardKey: string;
     baseInfoBtnLoading: boolean;
+    uploadAvatarBtnLoading: boolean;
     uploadAvatarLoading: boolean;
     userInfo: User | any;
     imageUrl?: string;
@@ -152,6 +156,7 @@
     currentCardKey: 'baseInfo',
     baseInfoBtnLoading: false,
     uploadAvatarLoading: false,
+    uploadAvatarBtnLoading: false,
     userInfo: undefined,
     imageUrl: undefined,
     tabList: [
@@ -217,31 +222,30 @@
     'font-size': '14px'
   }));
 
-  const beforeUpload = async (file: File) => {
+  function handleBeforeUpload (file: File) {
     const isJpgOrPng = file.type?.includes('image/'),
           isLt2M = file.size / 1024 / 1024 < 10;
 
     !isJpgOrPng &&  createMessage.error('您只能上传 image/* 格式的文件!');
     !isLt2M && createMessage.error('图片必须小于 10MB!');
+    return isJpgOrPng && isLt2M;
+  }
 
-    // 开始上传图片
+  async function handleUploadAvatar(file) {
-    if (isJpgOrPng && isLt2M) {
+    try {
-      try {
+      state.uploadAvatarLoading = true;
-        state.uploadAvatarLoading = true;
+      const { data } = await commonUpload({
-        const { data } = await commonUpload({
+        file: file.file,
-          file: file,
+        name: 'file',
-          name: 'file',
+      }, (progressEvent: ProgressEvent) => {
-        }, (progressEvent: ProgressEvent) => {
+        const complete = ((progressEvent.loaded / progressEvent.total) * 100) | 0;
-          const complete = ((progressEvent.loaded / progressEvent.total) * 100) | 0;
+        if (complete >= 100) state.uploadAvatarLoading = false;
-          if (complete >= 100) state.uploadAvatarLoading = false;
+      });
-        });
+      state.imageUrl = apiUrl + data.url;
-        state.imageUrl = apiUrl + data.url;
+    } finally {
-      } finally {
+      state.uploadAvatarLoading = false;
-        state.uploadAvatarLoading = false;
-      }
     }
-    return false;
+  }
-  };
 
 </script>
 
@@ -284,14 +288,18 @@
   margin: 10px 10px 10px 0px;
 
   ::v-deep(.avatar-uploader) > .ant-upload {
-    width: 128px;
+    width: 180px;
-    height: 128px;
+    height: 180px;
   }
 
   ::v-deep(.ant-upload-select-picture-card .ant-upload-text) {
     margin-top: 8px;
     color: #666;
   }
+
+  ::v-deep(.upload-avatar-form) > .ant-row {
+    margin-bottom: 0px;
+  }
 }
 
 </style>