新增价值条和报错提示

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,4 +1,5 @@
 <template>
+  <div>
 	<div class="d-flex align-items-end">
 	  <button  v-if="type=='file'" class="btn btn-light btn-sm change-file-button">
 	      {{file&&file.name||$t('common.selectFile')}}
@@ -21,6 +22,15 @@
 	    <button class="btn upload-btn btn-sm btn-danger" @click="del" >{{$t('common.delete')}}</button>
 	  </div>
 	</div>
+	<el-progress
+	  style="width:300px"
+	  v-if="boll"
+	  :percentage="uploadProgress"
+	  :status="uploadStatus"
+	  :stroke-width="10"
+	  class="my-2"
+	></el-progress>
+  </div>
 </template>
 <script>
 import Member from "@/api/member";
@@ -30,7 +40,12 @@ export default {
     return {
       file: undefined,
       uploadImg: "",
-      isLoad: false
+      isLoad: false,
+	  uploadProgress: 0,    // 新增进度状态
+	  uploadStatus: null,// 新增状态类型
+	  progressInterval: null,
+	  boll:false,
+	  continueUploading:true
     };
   },
   watch:{
@@ -48,6 +63,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 +79,9 @@ export default {
       }
     },
     change(ev) {
+	  this.uploadProgress = 0;
+	  this.uploadStatus = null;
+	  
       let file = this.$refs.file.files[0];
       let ele = this.$refs.file;
 
@@ -68,8 +90,7 @@ export default {
         allowSize:this.allowSize|| 5, // 单位为M
         allowType: ["image/png", "image/jpg", "image/jpeg", "image/pdf"]
       };
-      utils
-        .upload(option)
+      utils.upload(option)
         .then(result => {
           if (result.isIMG) {
             // 在预览区查看
@@ -90,10 +111,43 @@ export default {
         });
     },
     upload() {
+	  this.uploadStatus = null // 重置状态
+	  this.uploadProgress = 0 // 重置进度
+	  this.boll = true
+	  clearInterval(this.progressInterval); // 清除之前的定时器
+	  
+	  this.progressInterval = setInterval(() => {
+	    if (this.uploadProgress < 100&&this.continueUploading) {
+	      this.uploadProgress += Math.floor(Math.random() * 3) + 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
+		this.$message.error(this.$t('common.uploadfailed'));
 	  });
     }
   }

src/i18n/en.json

@@ -219,7 +219,8 @@
         "footerTips4": "Restricted Areas: Unable to provide services to residents of specific countries / regions, such as Israel and the Islamic Republic of China",
         "learn":"Learn",
         "GraphicValidation": "Graphical Verification",
-		"c12": "Rejection Information"
+		"c12": "Rejection Information",
+		"uploadfailed": "Upload failed, please upload again."
     },
     "exchange": {
         "search": "Search",

src/i18n/tw.json

@@ -220,7 +220,8 @@
         "footerTips4": "受限地區：無法為特定國家/地區的居民提供服務，例如：以色列和伊斯蘭共和國",
         "learn":"學院",
         "GraphicValidation": "圖形驗證",
-		"c12": "駁回信息"
+		"c12": "駁回信息",
+		"uploadfailed": "上傳失敗，請重新上傳"
     },
     "exchange": {
         "search": "搜索",