上传新增进度显示、环境变量新增默认上传地址配置

ZR.Vue/.env.development

@@ -9,3 +9,6 @@ VUE_APP_BASE_API = '/dev-api'
 
 # 路由前缀
 VUE_APP_ROUTER_PREFIX = '/'
+
+# 默认上传地址
+VUE_APP_UPLOAD_URL = '/Common/UploadFile'

ZR.Vue/.env.production

@@ -9,3 +9,6 @@ VUE_APP_BASE_API = '/prod-api'
 
 # 路由前缀
 VUE_APP_ROUTER_PREFIX = '/'
+
+# 默认上传地址
+VUE_APP_UPLOAD_URL = '/Common/UploadFile'

ZR.Vue/.env.staging

@@ -9,3 +9,6 @@ VUE_APP_BASE_API = '/stage-api'
 
 # 路由前缀
 VUE_APP_ROUTER_PREFIX = '/'
+
+# 默认上传地址
+VUE_APP_UPLOAD_URL = '/Common/UploadFile'

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);

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);
     },
   },
 };

ZR.Vue/src/main.js

@@ -77,4 +77,4 @@ new Vue({
   store,
   render: h => h(App)
 })
-console.log('后端地址:' + process.env.VUE_APP_BASE_API)
+console.log('环境变量:', process.env)