From 226b20120a1a99af6b5e2fb482d9c778de7a7a4a Mon Sep 17 00:00:00 2001
From: liaoxinyu <liaoxinyu@xingtongworld.com>
Date: Fri, 9 Jan 2026 16:53:26 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E4=BB=B7=E5=80=BC=E6=9D=A1?=
 =?UTF-8?q?=E5=92=8C=E6=8A=A5=E9=94=99=E6=8F=90=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/member.js            |   2 +-
 src/components/UploadImg.vue | 104 ++++++++++++++++++++++++++---------
 src/i18n/en.json             |   3 +-
 src/i18n/tw.json             |   3 +-
 4 files changed, 84 insertions(+), 28 deletions(-)

diff --git a/src/api/member.js b/src/api/member.js
index 1b51136..9e9a53c 100644
--- a/src/api/member.js
+++ b/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}});
     }
 
     /**
diff --git a/src/components/UploadImg.vue b/src/components/UploadImg.vue
index 006e315..c22aa34 100644
--- a/src/components/UploadImg.vue
+++ b/src/components/UploadImg.vue
@@ -1,25 +1,35 @@
 <template>
-  <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')}}
-       <input type="file" class="file" :required="required" :placeholder="placeholder" ref="file" @change="change" />
-    </button>
-    <div v-else class="el-upload-dragger mr-2 flex-shrink-0">
-      <label>
-        <input type="file" class="file" :required="required" :placeholder="placeholder" ref="file" @change="change" />
-        <img class="img" v-if="uploadImg" :src="imgFilter(uploadImg)" alt />
-        <template v-else>
-          <i class="el-icon-upload"></i>
-          <slot name="text"></slot>
-        </template>
-      </label>
-    </div>
-    <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> -->
-      <!-- v-else -->
-      <button class="btn upload-btn btn-sm btn-danger" @click="del" >{{$t('common.delete')}}</button>
-    </div>
+  <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')}}
+	     <input type="file" class="file" :required="required" :placeholder="placeholder" ref="file" @change="change" />
+	  </button>
+	  <div v-else class="el-upload-dragger mr-2 flex-shrink-0">
+	    <label>
+	      <input type="file" class="file" :required="required" :placeholder="placeholder" ref="file" @change="change" />
+	      <img class="img" v-if="uploadImg" :src="imgFilter(uploadImg)" alt />
+	      <template v-else>
+	        <i class="el-icon-upload"></i>
+	        <slot name="text"></slot>
+	      </template>
+	    </label>
+	  </div>
+	  <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> -->
+	    <!-- v-else -->
+	    <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>
@@ -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,11 +111,44 @@ 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'));
+	  });
     }
   }
 };
diff --git a/src/i18n/en.json b/src/i18n/en.json
index cf60638..14da0f9 100644
--- a/src/i18n/en.json
+++ b/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",
diff --git a/src/i18n/tw.json b/src/i18n/tw.json
index a63a00e..af0de5c 100644
--- a/src/i18n/tw.json
+++ b/src/i18n/tw.json
@@ -220,7 +220,8 @@
         "footerTips4": "受限地區：無法為特定國家/地區的居民提供服務，例如：以色列和伊斯蘭共和國",
         "learn":"學院",
         "GraphicValidation": "圖形驗證",
-		"c12": "駁回信息"
+		"c12": "駁回信息",
+		"uploadfailed": "上傳失敗，請重新上傳"
     },
     "exchange": {
         "search": "搜索",