活动管理完结上传文件进度条

src/components/tool/beUpload.vue

@@ -16,7 +16,7 @@ import "../common/aws-sdk-2.235.1.min.js";
 import { getNowDate } from "./Date";
 export default {
   components: {},
-  props: [ 'navName','accept'],
+  props: [ 'navName','accept','progress'],
   data() {
     return {
       inputShow: true,
@@ -53,6 +53,7 @@ export default {
         },
       }); //选择桶
       var _this = this;
+      _this.progress?_this.progress.show = true:'';
       if (file) {
         var params = {
           Key:
@@ -73,11 +74,10 @@ export default {
         bucket
           .upload(params, options)
           .on("httpUploadProgress", function (evt) {
-            //这里可以写进度条
-            // console.log("Uploaded : " + parseInt((evt.loaded * 80) / evt.total) + '%');
+            //进度条
+            _this.progress?_this.progress.value = Math.round((evt.loaded/evt.total)*100):'';
           })
           .send(function (err, data) {
-            // loading.close();
             _this.inputShow = true;
             if (err) {
               _this.$message.error("上传失败");
@@ -95,8 +95,11 @@ export default {
                 unit = "KB"
               }
               size = Math.floor(size);
-                _this.$emit('getFile',{fileName:file.name,size:`${size}${unit}`,uploadTime:getNowDate(),url:data.Location})
-              console.log(data.Location);
+              _this.$emit('getFile',{fileName:file.name,size:`${size}${unit}`,uploadTime:getNowDate(),url:data.Location})
+              if(_this.progress&&_this.progress.value==100){
+                _this.progress?_this.progress.show = false:"";
+                _this.progress?_this.progress.value=0:"";
+              }
             }
           });
       }

src/views/activityManage/makerActvity.vue

@@ -95,12 +95,6 @@
           label="预算经费（元）"
           min-width="8%">
         </el-table-column>
-        <!-- <el-table-column
-          prop="useBudget"
-          align="center"
-          label="实际使用(元)"
-          min-width="8%">
-        </el-table-column> -->
         <el-table-column
           prop="name"
           align="center"
@@ -149,11 +143,6 @@
         </el-table-column>
       </el-table>
 <!-- 表格结束 -->
-
-
-
-
-
       <!-- 活动审核对话框开始 -->
       <el-dialog
           title="活动审核"
@@ -269,10 +258,11 @@
         <div>{{ item.fileName }}</div>
         <el-button type="primary" @click="delEndTableFile(item.url)" size="mini">删除文件</el-button>
       </div>
+      <el-progress style="margin-top:20px" v-show="progress.show" :percentage="progress.value" :format="ProgressFormat"></el-progress>
       <div class="addMoneyBtn">
           <div class="jia">+</div>添加
           <div id="upFile">
-            <beUpload @getFile="getFile" :navName="'上传文件'" :accept="accept"> </beUpload>
+            <beUpload @getFile="getFile" :navName="'上传文件'" :progress="progress" :accept="accept"> </beUpload>
           </div>
       </div>
       <!-- <div class="DelBtn" style="margin-left: 0;" v-if="endTable.file!=''&&endTable.file!=null">
@@ -340,6 +330,10 @@ import beUpload from '../../components/tool/beUpload'
             Id:"",
             title:"",
             file:[],
+          },
+          progress:{
+            value:0,
+            show:false
           }
         }
       },
@@ -495,6 +489,10 @@ import beUpload from '../../components/tool/beUpload'
           }else{
             return cdata[0]+" 至 "+cdata[1]
           }
+        },
+        //精度条样式
+        ProgressFormat(value){
+          return value ==100?this.progress.show = false :`${value}%`
         }
       },
       mounted() {