upload loading

src/components/upload-img.vue

@@ -1,10 +1,11 @@
 <template>
-  <div>
-    <a-upload
+  <div class="avatar-uploader">
+     
+    <a-spin :spinning="loading"  >
+      <a-upload
       name="file"
       :data="upData"
       list-type="picture-card"
-      class="avatar-uploader"
       :show-upload-list="false"
       action="https://upload-z1.qiniup.com"
       :before-upload="beforeAvatarUpload"
@@ -12,11 +13,11 @@
     >
       <img v-if="props.imgUrl" :src="props.imgUrl" alt="avatar" />
       <div v-else>
-        <loading-outlined v-if="loading"></loading-outlined>
-        <plus-outlined v-else></plus-outlined>
         <div class="ant-upload-text">{{ title }}</div>
       </div>
     </a-upload>
+     </a-spin>
+
   </div>
 </template>
 
@@ -82,7 +83,8 @@ const imgSuccess = async (res, file) => {
 
     emit("imgSuccess", img.value, file);
     console.log(img.value, qiniuData.value, "imgUrl");
-  }, 1000);
+    loading.value=false
+  }, 1500);
 };
 const beforeAvatarUpload = async (file) => {
   console.log(file, "file");
@@ -92,6 +94,7 @@ const beforeAvatarUpload = async (file) => {
     message.error("上传图片大小不能超过 100MB!");
     return false;
   }
+  loading.value=true
   let mimeType = file.name.split(".").pop();
   upData.value.key = `${qiniuData.value.prefix}img/${getToday()}.${mimeType}`;
   return isLt2M;