新增加载条

src/api/member.js

@@ -85,7 +85,7 @@ class Member {
      * @param {FormData} data
      */
     static uploadImage(data) {
-        return server.post(`/uploadImage`, data);
+        return server.post(`/uploadImage`, data,{config:{loading:false}});
     }
 
     /**

src/components/UploadImg.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="d-flex align-items-end">
+  <div class="d-flex align-items-end" style="position: relative;">
     <button  v-if="type=='file'" class="btn btn-light btn-sm change-file-button">
         {{file&&file.name||$t('common.selectFile')}}
        <input type="file" class="file" :required="required" :placeholder="placeholder" ref="file" @change="change" />
@@ -14,6 +14,13 @@
         </template>
       </label>
     </div>
+	<el-progress
+	  v-if="boll"
+	  :percentage="uploadProgress"
+	  :status="uploadStatus"
+	  :stroke-width="10"
+	  class="my-2"
+	></el-progress>
     <div v-if="file">
       <p>{{file.name}}</p>
       <!-- <button class="btn upload-btn btn-sm btn-primary" @click="upload" v-if="!value">{{$t('common.upload')}}</button> -->
@@ -30,7 +37,12 @@ export default {
     return {
       file: undefined,
       uploadImg: "",
-      isLoad: false
+      isLoad: false,
+	  uploadProgress: 0,    // 新增进度状态
+	  uploadStatus: null,// 新增状态类型
+	  progressInterval: null,
+	  boll:false,
+	  continueUploading:true
     };
   },
   watch:{
@@ -48,6 +60,10 @@ export default {
   },
   methods: {
     del() {
+	  this.uploadProgress = 0;
+	  this.uploadStatus = null;
+	  this.boll = false
+		
       this.file = undefined;
       this.$emit("input", undefined);
       this.$refs.file.value=''
@@ -60,6 +76,9 @@ export default {
       }
     },
     change(ev) {
+	  this.uploadProgress = 0;
+	  this.uploadStatus = null;
+		
       let file = this.$refs.file.files[0];
       let ele = this.$refs.file;
 
@@ -90,11 +109,46 @@ export default {
         });
     },
     upload() {
-      let data = new FormData();
+      this.uploadStatus = null // 重置状态
-      data.append("image", this.file);
+      this.uploadProgress = 0 // 重置进度
-      Member.uploadImage(data).then(res => {
+      this.boll = true
-        this.$emit("input", res.path);
+      clearInterval(this.progressInterval); // 清除之前的定时器
-      });
+      
+      this.progressInterval = setInterval(() => {
+        if (this.uploadProgress < 100&&this.continueUploading) {
+          this.uploadProgress += Math.floor(Math.random() * 2) + 1;
+      	setTimeout(() => {
+      	  this.continueUploading = false;
+      	  // 暂停3秒后继续累加
+      	  setTimeout(() => {
+      	    this.continueUploading = true;
+      	  }, 3000); // 这里的3000毫秒表示暂停3秒后继续
+      	}, 1000);
+        }
+      }, 50);
+      
+      let data = new FormData()
+      data.append("image", this.file)
+      
+      Member.uploadImage(data)
+        .then(res => {
+          this.$emit("input", res.path)
+          // 2秒后隐藏进度条
+          if(res.path){
+      		setTimeout(() => {
+      		  this.uploadStatus = 'success'
+      		  this.uploadProgress = 100
+      		  clearInterval(this.progressInterval); // 清除之前的定时器
+      		  setTimeout(() => {
+      		  	this.boll = false
+      		  },3000)
+      		}, 2000)
+      	}
+        })
+        .catch(err => {
+          this.uploadStatus = 'exception'
+          this.uploadProgress = 100
+        })
     }
   }
 };
@@ -131,4 +185,20 @@ export default {
     object-fit: cover;
   }
 }
+
+.el-progress {
+  position: absolute;
+  bottom: -25px;
+  left:18px;
+  width: 300px;
+  margin-top: 10px;
+  
+  &-bar {
+    padding-right: 45px;
+  }
+  
+  &__text {
+    font-size: 12px!important;
+  }
+}
 </style>