style：优化上传样式

src/view/NFT/Create/upload.vue

@@ -9,7 +9,7 @@
       ref="inputFile"
       accept=".pdf"
     />
-    <label for="upload">
+    <label for="upload" class="inline-block">
       <div
         ref="uploadBox"
         class="
@@ -18,26 +18,40 @@
           flex
           items-center
           justify-center
-          mx-auto
           text-font-white
         "
       >
         <img
-          v-if="!fileName"
+          v-if="status === uploadStatus.NULL"
           src="@/assets/icons/upload.png"
           alt=""
           class="mx-auto"
         />
-        <img v-else src="@/assets/icons/file.png" alt="" class="mx-auto" />
+        <img
+          v-else-if="status === uploadStatus.success"
+          src="@/assets/icons/file.png"
+          alt=""
+          class="mx-auto"
+        />
+        <Loading type="spiner" v-else-if="status === uploadStatus.uploading" />
+        <div v-else-if="status === uploadStatus.failed">上传失败</div>
       </div>
     </label>
     <div class="text-center text-font-white">
-      <div v-if="!fileName">支持扩展名格式：PDF</div>
-      <div v-if="fileName">
+      <div v-if="!fileName" class="mt-2">支持扩展名格式：PDF</div>
+      <div v-if="fileName" class="mt-2">
         {{ fileName }}
       </div>
-      <label for="upload">
-        <div v-if="fileName">重新上传</div>
+      <label for="upload" class="mt-2">
+        <div
+          v-if="
+            status === uploadStatus.failed || status === uploadStatus.success
+          "
+          style="color: #0076ff"
+          class="inline-block"
+        >
+          重新上传
+        </div>
       </label>
     </div>
     <div class="flex justify-between fixed bottom-0 left-0 right-0">
@@ -59,17 +73,31 @@
 </template>
 
 <script lang="ts">
-
 import Vue from "vue";
+import { Uploader, Loading } from "vant";
 import { mapMutations, mapState } from "vuex";
+
+enum uploadStatus {
+  NULL,
+  uploading,
+  failed,
+  success,
+}
+
 export default Vue.extend({
   data() {
-    return {};
+    return {
+      fileList: [],
+      uploading: false,
+      uploadStatus,
+      status: uploadStatus.NULL,
+    };
   },
   components: {
     "Layout-Child": () => import("@/layout/Child.vue"),
     "app-btn": () => import("@/components/common/Btn.vue"),
-
+    Uploader,
+    Loading,
   },
   computed: {
     ...mapState("create", ["fileName"]),
@@ -90,17 +118,27 @@ export default Vue.extend({
     }),
     async afterRead(file: File) {
       try {
+        this.status = uploadStatus.uploading;
         const ret = await this.$service.nftService.getMd5(file);
         this.setState({
           fileName: file.name,
           fileHash: ret,
-          file: file
+          file: file,
         });
+        this.status = uploadStatus.success;
       } catch (err) {
-        console.log(err);
-        
+        this.status = uploadStatus.failed;
       }
     },
+    afterRead2(file: any) {
+      file.status = "uploading";
+      file.message = "上传中...";
+
+      setTimeout(() => {
+        file.status = "failed";
+        file.message = "上传失败";
+      }, 1000);
+    },
   },
 });
 </script>