feat: 图片上传进度-数据对接

src/components/upload-progress/upload-progress.vue

@@ -77,7 +77,7 @@
 				return process.uniEnv.qn_base_url + 'upload-default.png'
 			},
       taskCount() {
-        return this.uploadTask.length
+        return this.uploadTotal
       },
       uploadStatusName() {
         let status
@@ -98,7 +98,17 @@
         return this.uploadStatus === 3 ? '#FA5A49' : '#2272FF'
       },
       uploadPercentage() {
-        return Number(this.uploadSuccess) / Number(this.uploadTask.length)
+        const num = this.uploadSuccess
+        const total = this.uploadTotal
+        return total > 0 ? Math.floor(Math.round(num / total * 10000) / 100.00) : 0
+      }
+    },
+    watch: {
+      uploadStatus(newValue) {
+        this.progressStatus = false
+        this.$nextTick(() => {
+          this.progressStatus = true
+        })
       }
     },
     methods: {
@@ -107,6 +117,7 @@
       },
       openpRrogress() {
         this.open = true
+        this.progressStatus = false
         setTimeout(() => {
           this.progressStatus = true
         }, 300)

src/components/upload/index.js

@@ -69,14 +69,14 @@ export default {
 					...order
 				}
 			})
-			// for (let i = 0; i < files.length; i++) {
-			// 	const path = files[i]
-			// 	const row = await this.saveFiles(path)
-			// 	lists.push(row)
-			// }
+			
 			const data = JSON.parse(JSON.stringify(this.uploadTask))
 			const saveLists = data.concat(lists)
 			this.$u.vuex('uploadTask', saveLists)
+
+			const newTotal = this.uploadTotal + lists.length
+			this.$u.vuex('uploadTotal', newTotal)
+			//this.$u.vuex('uploadSuccess', 0)
 			return lists
 		},
 		/**

src/components/upload/task.js

@@ -19,6 +19,8 @@ export default {
      * 执行任务队列
      */
     async uploadImageTask(that) {
+        if (that.uploadStatus === 2) return
+
         that.$u.vuex('uploadStatus', 2)
         const uploadTask = JSON.parse(JSON.stringify(that.uploadTask)).reverse()
         const networkType = await getNetworkType()
@@ -35,8 +37,6 @@ export default {
                 }
                 delete log.files
                 RUN('upload_photo_success', log)
-
-                that.$u.vuex('uploadSuccess', that.uploadSuccess++)
             },
             onProgressUpdate: res => {
                 //console.log("上传进度返回：",res);
@@ -44,6 +44,8 @@ export default {
         }
 
         uploader.qnFileUpload(options).then(res => {
+            const newSuccess = that.uploadSuccess + res.length
+            that.$u.vuex('uploadSuccess', newSuccess)
             this.refreshTask(that, res)
         }).catch(err => {
             console.log("err", err)
@@ -70,7 +72,7 @@ export default {
             }
         })
         
-        // uni.setStorageSync('delImg', delImg) // 已上传完的图片，会在启动系统的时候做一次清理
+        that.$u.vuex('uploadStatus', 1)
         that.$u.vuex('uploadTask', newTask)
         this.resetProgress(that)
     },
@@ -78,6 +80,7 @@ export default {
     resetProgress(that) {
         if (that.uploadTask.length === 0) { // 上传完本地所有照片
             that.$u.vuex('uploadSuccess', 0)
+            that.$u.vuex('uploadTotal', 0)
             that.$u.vuex('uploadStatus', 1)
         }
     }

src/store/index.js

@@ -12,7 +12,7 @@ try {
 }
 
 // 需要永久存储，且下次APP启动需要取出的，在state中的变量名
-let saveStateKeys = ['vuex_user', 'vuex_wx_uid', 'vuex_token', 'vuex_cache', 'uploadTask', 'uploadSuccess', 'vuex_superuser'];
+let saveStateKeys = ['vuex_user', 'vuex_wx_uid', 'vuex_token', 'vuex_cache', 'uploadTask', 'uploadTotal', 'uploadSuccess', 'vuex_superuser'];
 
 // 保存变量到本地存储中
 const saveLifeData = function(key, value) {
@@ -45,6 +45,8 @@ const store = new Vuex.Store({
 		uploadTask: lifeData.uploadTask ? lifeData.uploadTask : [],
 		// 上传状态 1 未开始  2 上传中  3 上传中断
 		uploadStatus: 1,
+		// 上传总数量
+		uploadTotal: lifeData.uploadTotal ? lifeData.uploadTotal : 0,
 		// 已上传数量
 		uploadSuccess: lifeData.uploadSuccess ? lifeData.uploadSuccess : 0,
 	},