From ab6e99d72141783c46cf7b57eba802dd87a1feb6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=8D=E5=81=9A=E7=A0=81=E5=86=9C?= <599854767@qq.com>
Date: Sun, 19 Dec 2021 12:36:16 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=8A=E4=BC=A0=E6=96=B0=E5=A2=9E=E8=BF=9B?=
 =?UTF-8?q?=E5=BA=A6=E6=98=BE=E7=A4=BA=E3=80=81=E7=8E=AF=E5=A2=83=E5=8F=98?=
 =?UTF-8?q?=E9=87=8F=E6=96=B0=E5=A2=9E=E9=BB=98=E8=AE=A4=E4=B8=8A=E4=BC=A0?=
 =?UTF-8?q?=E5=9C=B0=E5=9D=80=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ZR.Vue/.env.development                     |  3 ++
 ZR.Vue/.env.production                      |  3 ++
 ZR.Vue/.env.staging                         |  3 ++
 ZR.Vue/src/components/FileUpload/index.vue  | 34 +++++++++++++++------
 ZR.Vue/src/components/UploadImage/index.vue | 28 +++++++++++------
 ZR.Vue/src/main.js                          |  2 +-
 6 files changed, 53 insertions(+), 20 deletions(-)

diff --git a/ZR.Vue/.env.development b/ZR.Vue/.env.development
index e3d7f72..8616d91 100644
--- a/ZR.Vue/.env.development
+++ b/ZR.Vue/.env.development
@@ -9,3 +9,6 @@ VUE_APP_BASE_API = '/dev-api'
 
 # 路由前缀
 VUE_APP_ROUTER_PREFIX = '/'
+
+# 默认上传地址
+VUE_APP_UPLOAD_URL = '/Common/UploadFile'
\ No newline at end of file
diff --git a/ZR.Vue/.env.production b/ZR.Vue/.env.production
index d54f532..7158a65 100644
--- a/ZR.Vue/.env.production
+++ b/ZR.Vue/.env.production
@@ -9,3 +9,6 @@ VUE_APP_BASE_API = '/prod-api'
 
 # 路由前缀
 VUE_APP_ROUTER_PREFIX = '/'
+
+# 默认上传地址
+VUE_APP_UPLOAD_URL = '/Common/UploadFile'
diff --git a/ZR.Vue/.env.staging b/ZR.Vue/.env.staging
index 4504612..14b1559 100644
--- a/ZR.Vue/.env.staging
+++ b/ZR.Vue/.env.staging
@@ -9,3 +9,6 @@ VUE_APP_BASE_API = '/stage-api'
 
 # 路由前缀
 VUE_APP_ROUTER_PREFIX = '/'
+
+# 默认上传地址
+VUE_APP_UPLOAD_URL = '/Common/UploadFile'
\ No newline at end of file
diff --git a/ZR.Vue/src/components/FileUpload/index.vue b/ZR.Vue/src/components/FileUpload/index.vue
index b4f4adb..c08d9f5 100644
--- a/ZR.Vue/src/components/FileUpload/index.vue
+++ b/ZR.Vue/src/components/FileUpload/index.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="upload-file">
     <el-upload :action="uploadFileUrl" :before-upload="handleBeforeUpload" :file-list="fileList" :limit="limit" :on-error="handleUploadError"
-      :on-exceed="handleExceed" :on-success="handleUploadSuccess" :show-file-list="false" :data="data" :headers="headers" class="upload-file-uploader"
-      ref="upload">
+      :on-exceed="handleExceed" :on-success="handleUploadSuccess" :on-progress="uploadProcess" :show-file-list="false" :data="data" :headers="headers"
+      class="upload-file-uploader" ref="upload">
       <!-- 上传按钮 -->
       <el-button size="mini" type="primary" icon="el-icon-upload">选取文件</el-button>
       <!-- 上传提示 -->
@@ -12,6 +12,7 @@
         <template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b> </template>
         的文件
       </div>
+      <el-progress v-show="showProgress == true" :percentage="uploadPercent" style="margin-top:10px;"></el-progress>
     </el-upload>
 
     <!-- 文件列表 -->
@@ -59,17 +60,19 @@ export default {
     // 上传地址
     uploadUrl: {
       type: String,
-      default: "/Common/UploadFile",
+      default: process.env.VUE_APP_UPLOAD_URL ?? "/Common/UploadFile",
     },
-		// form 列名
+    // form 列名
     column: [String],
-		// 上传携带的参数
-		data: {
-			type: Object
-		}
+    // 上传携带的参数
+    data: {
+      type: Object,
+    },
   },
   data() {
     return {
+      showProgress: false,
+      uploadPercent: 0,
       baseUrl: process.env.VUE_APP_BASE_API,
       uploadFileUrl: process.env.VUE_APP_BASE_API + this.uploadUrl, // 上传的图片服务器地址
       headers: {
@@ -137,6 +140,7 @@ export default {
           return false;
         }
       }
+      this.showProgress = true;
       return true;
     },
     // 文件个数超出
@@ -146,11 +150,17 @@ export default {
     // 上传失败
     handleUploadError(err) {
       this.msgError("上传失败, 请重试");
+      this.fileList = [];
+      this.showProgress = false;
+      this.uploadPercent = 0;
     },
     // 上传成功回调
     handleUploadSuccess(res, file) {
+      this.showProgress = false;
+      this.uploadPercent = 0;
+
       if (res.code != 200) {
-				this.fileList = [];
+        this.fileList = [];
         this.msgError(`上传失败，原因:${res.msg}!`);
         return;
       }
@@ -158,6 +168,12 @@ export default {
       this.fileList.push({ name: res.data.fileName, url: res.data.url });
       this.$emit("input", this.column, this.listToString(this.fileList));
     },
+    // 上传进度
+    uploadProcess(event, file, fileList) {
+      this.showProgress = true;
+      this.videoUploadPercent = file.percentage.toFixed(0);
+      console.log("上传进度" + file.percentage);
+    },
     // 删除文件
     handleDelete(index) {
       this.fileList.splice(index, 1);
diff --git a/ZR.Vue/src/components/UploadImage/index.vue b/ZR.Vue/src/components/UploadImage/index.vue
index d2fc509..a865575 100644
--- a/ZR.Vue/src/components/UploadImage/index.vue
+++ b/ZR.Vue/src/components/UploadImage/index.vue
@@ -2,9 +2,10 @@
   <div class="component-upload-image">
     <el-upload list-type="picture-card" :action="uploadImgUrl" :on-success="handleUploadSuccess" :before-upload="handleBeforeUpload"
       :on-exceed="handleExceed" :on-remove="handleRemove" :on-error="handleUploadError" name="file" :show-file-list="true" :limit="limit"
-      :file-list="fileList" :on-preview="handlePictureCardPreview" :class="{hide: this.fileList.length >= this.limit}" :headers="headers">
+      :file-list="fileList" :on-preview="handlePictureCardPreview" :on-progress="uploadProcess" :class="{hide: this.fileList.length >= this.limit}"
+      :headers="headers">
       <i class="el-icon-plus"></i>
-
+      <el-progress v-if="showProgress == true" type="circle" :percentage="uploadPercent" style="margin-top:10px;"></el-progress>
       <!-- 上传提示 -->
       <div class="el-upload__tip" slot="tip" v-if="showTip">
         请上传
@@ -34,7 +35,7 @@ export default {
     // 上传地址
     uploadUrl: {
       type: String,
-      default: "/Common/UploadFile",
+      default: process.env.VUE_APP_UPLOAD_URL ?? "/Common/UploadFile",
     },
     // 文件类型, 例如['png', 'jpg', 'jpeg']
     fileType: {
@@ -59,6 +60,8 @@ export default {
       dialogImageUrl: "",
       dialogVisible: false,
       hideUpload: false,
+      showProgress: false,
+      uploadPercent: 0,
       uploadImgUrl: process.env.VUE_APP_BASE_API + this.uploadUrl, // 上传的图片服务器地址
       headers: {
         Authorization: "Bearer " + getToken(),
@@ -112,7 +115,9 @@ export default {
     //上传成功回调
     handleUploadSuccess(res) {
       console.log(res);
-      this.loading.close();
+      this.showProgress = false;
+      this.uploadPercent = 0;
+
       if (res.code != 200) {
         this.msgError(`上传失败，原因:${res.msg}!`);
         return;
@@ -150,11 +155,7 @@ export default {
           return false;
         }
       }
-      this.loading = this.$loading({
-        lock: true,
-        text: "上传中",
-        background: "rgba(0, 0, 0, 0.7)",
-      });
+      this.showProgress = true;
     },
     // 文件个数超出
     handleExceed() {
@@ -179,7 +180,14 @@ export default {
         type: "error",
         message: "上传失败",
       });
-      this.loading.close();
+      this.showProgress = false;
+      this.uploadPercent = 0;
+    },
+    // 上传进度
+    uploadProcess(event, file, fileList) {
+      this.showProgress = true;
+      this.videoUploadPercent = file.percentage.toFixed(0);
+      console.log("上传进度" + file.percentage);
     },
   },
 };
diff --git a/ZR.Vue/src/main.js b/ZR.Vue/src/main.js
index 9ccbc54..4ee9e8a 100644
--- a/ZR.Vue/src/main.js
+++ b/ZR.Vue/src/main.js
@@ -77,4 +77,4 @@ new Vue({
   store,
   render: h => h(App)
 })
-console.log('后端地址:' + process.env.VUE_APP_BASE_API)
\ No newline at end of file
+console.log('环境变量:', process.env)
\ No newline at end of file