upload 增加进度条

components/page/files.vue

@@ -13,6 +13,7 @@
       :on-format-error="onFormatError"
       multiple
       :style="style"
+      :on-progress="onProgress"
     >
       <div style="padding: 20px 0;text-align:center" v-if="cloudIco">
         <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
@@ -20,6 +21,7 @@
       </div>
       <Button icon="ios-cloud-upload-outline" v-if="!cloudIco">上传文件</Button>
     </Upload>
+    <Progress :percent="per" :stroke-width="5" v-show="vshowPro"/>
     <Tag
       v-for="(item,index) in nameList"
       :key="index"
@@ -47,7 +49,9 @@ export default {
       hbaseFileListNew: [],
       formatList: ['png', 'jpg', 'gif'],
       postUrl: '',
-      style: ''
+      style: '',
+      per: 0,
+      vshowPro: false
     }
   },
   created() {},
@@ -75,11 +79,17 @@ export default {
     }
   },
   methods: {
+    onProgress(event, file, fileList) {
+      this.per = 0
+      this.vshowPro = true
+    },
     // change(event) {
     //   this.$emit('on-change', event)
     // },
     //上传成功文件
     uploadSuccess(response, file, fileList) {
+      this.per = 60
+      this.vshowPro = true
       const hbaseFileList = []
       const filesList = []
       if (file.response.status == 0) {
@@ -89,6 +99,11 @@ export default {
         objImag.id = file.response.data.id
         filesList.push(objImag)
         this.nameList = this.nameList.concat(filesList)
+        this.per = 100
+        setTimeout(() => {
+          this.per = 0
+          this.vshowPro = false
+        }, 2000)
       } else {
         this.$Message.error('上传失败，请重新上传!')
       }

components/page/imgUploadFile.vue

@@ -22,9 +22,11 @@
             :on-format-error="onFormatError"
             :show-upload-list="false"
             :files="files"
+            :on-progress="onProgress"
           >
             <Button type="primary" icon="ios-cloud-upload-outline">本地上传</Button>
           </Upload>
+          <Progress :percent="per" :stroke-width="5" v-show="vshowPro"/>
         </Col>
       </Row>
     </template>
@@ -86,7 +88,9 @@ export default {
         '&' +
         this.parms,
       formatList: ['png', 'jpg', 'gif'],
-      newName: ''
+      newName: '',
+      per: 0,
+      vshowPro: false
     }
   },
   created() {
@@ -256,11 +260,17 @@ export default {
       this.isCancas = true
       this.isphoto = false
     },
+    onProgress(event, file, fileList) {
+      this.per = 0
+      this.vshowPro = true
+    },
     //  change(event) {
     //  this.$emit('on-change', event.target.value)
     // },
     //上传成功文件
     uploadSuccess(response, file, fileList) {
+      this.per = 60
+      this.vshowPro = true
       const hbaseFileList = []
       const filesList = []
       if (file.response.status == 0) {
@@ -271,6 +281,11 @@ export default {
         this.fileUrlPath = this.downUrl + objImag.filePath
         this.newName = file.response.data.fileName
         this.$emit('on-change', JSON.stringify(filesList))
+        this.per = 100
+        setTimeout(() => {
+          this.per = 0
+          this.vshowPro = false
+        }, 2000)
       } else {
         this.$Message.error('上传失败，请重新上传!')
       }

components/page/inputFile.vue

@@ -14,9 +14,11 @@
       :on-format-error="onFormatError"
       :show-upload-list="false"
       :files="files"
+      :on-progress="onProgress"
     >
       <Button icon="ios-cloud-upload-outline">上传文件</Button>
     </Upload>
+    <Progress :percent="per" :stroke-width="5" v-show="vshowPro"/>
   </div>
 </template>
 <script>
@@ -40,7 +42,9 @@ export default {
         '&' +
         this.parms,
       formatList: ['png', 'jpg', 'gif'],
-      newName: ''
+      newName: '',
+      per: 0,
+      vshowPro: false
     }
   },
   created() {},
@@ -60,11 +64,17 @@ export default {
     }
   },
   methods: {
+    onProgress(event, file, fileList) {
+      this.per = 0
+      this.vshowPro = true
+    },
     //  change(event) {
     //  this.$emit('on-change', event.target.value)
     // },
     //上传成功文件
     uploadSuccess(response, file, fileList) {
+      this.per = 60
+      this.vshowPro = true
       const hbaseFileList = []
       const filesList = []
       if (file.response.status == 0) {
@@ -74,6 +84,11 @@ export default {
         filesList.push(objImag)
         this.newName = file.response.data.fileName
         this.$emit('on-change', JSON.stringify(filesList))
+        this.per = 100
+        setTimeout(() => {
+          this.per = 0
+          this.vshowPro = false
+        }, 2000)
       } else {
         this.$Message.error('上传失败，请重新上传!')
       }

pages/processDesign/Process/detailfiles.vue

@@ -12,12 +12,14 @@
       :on-exceeded-size="onExceededSize"
       :on-format-error="onFormatError"
       :action="postUrl"
+      :on-progress="onProgress"
     >
       <div style="padding: 20px 0;text-align:center">
         <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
         <p>将文件拖到此处，或点击上传</p>
       </div>
     </Upload>
+    <Progress :percent="per" :stroke-width="5" v-show="vshowPro"/>
     <Tag
       v-for="(item,index) in nameList"
       :key="index"
@@ -62,7 +64,9 @@ export default {
         'jpg',
         'gif'
       ],
-      postUrl: ''
+      postUrl: '',
+      per: 0,
+      vshowPro: false
     }
   },
   created() {},
@@ -72,7 +76,13 @@ export default {
 
       this.intFiles()
     },
+    onProgress(event, file, fileList) {
+      this.per = 0
+      this.vshowPro = true
+    },
     uploadSuccess(response, file, fileList) {
+      this.per = 60
+      this.vshowPro = true
       const hbaseFileList = []
       const filesList = []
       if (file.response.status == 0) {
@@ -82,6 +92,11 @@ export default {
         objImag.id = file.response.data.id
         filesList.push(objImag)
         this.nameList = this.nameList.concat(filesList)
+        this.per = 100
+        setTimeout(() => {
+          this.per = 0
+          this.vshowPro = false
+        }, 2000)
 
         var url = `${designUrl}/routingfile/createorupdate`
         var dataValidate = {

pages/processDesign/Process/processfile.vue

@@ -12,12 +12,14 @@
       :on-exceeded-size="onExceededSize"
       :on-format-error="onFormatError"
       :action="postUrl"
+      :on-progress="onProgress"
     >
       <div style="padding: 20px 0;text-align:center">
         <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
         <p>将文件拖到此处，或点击上传</p>
       </div>
     </Upload>
+    <Progress :percent="per" :stroke-width="5" v-show="vshowPro"/>
     <Tag
       v-for="(item,index) in nameList"
       :key="index"
@@ -53,7 +55,9 @@ export default {
         'jpg',
         'gif'
       ],
-      postUrl: ''
+      postUrl: '',
+      per: 0,
+      vshowPro: false
     }
   },
   created() {},
@@ -66,8 +70,13 @@ export default {
     
   },
   methods: {
-  
+  onProgress(event, file, fileList) {
+      this.per = 0
+      this.vshowPro = true
+    },
     uploadSuccess(response, file, fileList) {
+      this.per = 60
+      this.vshowPro = true
       const hbaseFileList = []
       const filesList = []
       if (file.response.status == 0) {
@@ -77,6 +86,11 @@ export default {
         objImag.id = file.response.data.id
         filesList.push(objImag)
         this.nameList = this.nameList.concat(filesList)
+        this.per = 100
+        setTimeout(() => {
+          this.per = 0
+          this.vshowPro = false
+        }, 2000)
       } else {
         this.$Message.error('上传失败，请重新上传!')
       }

pages/processManage/Process/detailfiles.vue

@@ -12,12 +12,14 @@
       :on-exceeded-size="onExceededSize"
       :on-format-error="onFormatError"
       :action="postUrl"
+      :on-progress="onProgress"
     >
       <div style="padding: 20px 0;text-align:center">
         <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
         <p>将文件拖到此处，或点击上传</p>
       </div>
     </Upload>
+    <Progress :percent="per" :stroke-width="5" v-show="vshowPro"/>
     <Tag
       v-for="(item,index) in nameList"
       :key="index"
@@ -62,7 +64,9 @@ export default {
         'jpg',
         'gif'
       ],
-      postUrl: ''
+      postUrl: '',
+      per: 0,
+      vshowPro: false
     }
   },
   created() {},
@@ -72,7 +76,13 @@ export default {
 
       this.intFiles()
     },
+    onProgress(event, file, fileList) {
+      this.per = 0
+      this.vshowPro = true
+    },
     uploadSuccess(response, file, fileList) {
+      this.per = 60
+      this.vshowPro = true
       const hbaseFileList = []
       const filesList = []
       if (file.response.status == 0) {
@@ -82,6 +92,11 @@ export default {
         objImag.id = file.response.data.id
         filesList.push(objImag)
         this.nameList = this.nameList.concat(filesList)
+        this.per = 100
+        setTimeout(() => {
+          this.per = 0
+          this.vshowPro = false
+        }, 2000)
 
         var url = `${designUrl}/routingfile/createorupdate`
         var dataValidate = {

pages/processManage/Process/processfile.vue

@@ -12,12 +12,14 @@
       :on-exceeded-size="onExceededSize"
       :on-format-error="onFormatError"
       :action="postUrl"
+      :on-progress="onProgress"
     >
       <div style="padding: 20px 0;text-align:center">
         <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
         <p>将文件拖到此处，或点击上传</p>
       </div>
     </Upload>
+    <Progress :percent="per" :stroke-width="5" v-show="vshowPro"/>
     <Tag
       v-for="(item,index) in nameList"
       :key="index"
@@ -53,7 +55,9 @@ export default {
         'jpg',
         'gif'
       ],
-      postUrl: ''
+      postUrl: '',
+      per: 0,
+      vshowPro: false
     }
   },
   created() {},
@@ -66,8 +70,13 @@ export default {
     
   },
   methods: {
-  
+  onProgress(event, file, fileList) {
+      this.per = 0
+      this.vshowPro = true
+    },
     uploadSuccess(response, file, fileList) {
+      this.per = 60
+      this.vshowPro = true
       const hbaseFileList = []
       const filesList = []
       if (file.response.status == 0) {
@@ -77,6 +86,11 @@ export default {
         objImag.id = file.response.data.id
         filesList.push(objImag)
         this.nameList = this.nameList.concat(filesList)
+        this.per = 100
+        setTimeout(() => {
+          this.per = 0
+          this.vshowPro = false
+        }, 2000)
       } else {
         this.$Message.error('上传失败，请重新上传!')
       }