feat: 【我的素材】上传交互优化：随时上传随时更新列表，切换路由不丢失上传数据。

src/Store/index.js

@@ -20,7 +20,12 @@ const store = new Vuex.Store({
     sceneList:[],
     activeItem:'',
     isEditing:false,
-    isShow: false
+    isShow: false,
+
+    uploadStatusListAudio: [],
+    uploadStatusListImage: [],
+    uploadStatusListPano: [],
+    uploadStatusListVideo: [],
   },
   getters: {
     isEditing:state=>state.isEditing,
@@ -36,7 +41,12 @@ const store = new Vuex.Store({
     temptablist:state=>state.temptablist,
     sceneList:state=>state.sceneList,
     isShow:state=>state.isShow,
-    allVrlist:state=>state.allVrlist
+    allVrlist:state=>state.allVrlist,
+
+    uploadStatusListAudio: state => state.uploadStatusListAudio,
+    uploadStatusListImage: state => state.uploadStatusListImage,
+    uploadStatusListPano: state => state.uploadStatusListPano,
+    uploadStatusListVideo: state => state.uploadStatusListVideo,
   },
   mutations: {
     SetTabList(state, list) {

src/views/material/audio/index.vue

@@ -91,7 +91,7 @@
           >
         </div>
       </tableList>
-      <UploadTaskList class="upload-list-new" v-show="uploadTaskList.length != 0" fileType="AUDIO" :taskList="uploadTaskList" @cancel-task="onCancelTask"></UploadTaskList>
+      <UploadTaskList class="upload-list-new" fileType="AUDIO" :taskList="uploadListForUI" @cancel-task="onCancelTask"></UploadTaskList>
       <div class="total-number" v-if="list.length !== 0 || hasMoreData">已加载{{list.length}}条</div>
       <div class="nodata" v-if="list.length == 0 && !hasMoreData && lastestUsedSearchKey">
         <img :src="$noresult" alt="" />
@@ -125,6 +125,7 @@ import Upload from "@/components/shared/uploads/UploadMultiple";
 import { changeByteUnit } from "@/utils/file";
 import UploadTaskList from "../components/uploadList1.1.0.vue";
 import { debounce } from "@/utils/other.js"
+import { mapState } from 'vuex';
 
 import {
   getMaterialList,
@@ -167,10 +168,13 @@ export default {
       list: [],
       hasMoreData: true,
       isRequestingMoreData: false,
-      uploadTaskList: [],
-      uploadHandlerList: [],
     };
   },
+  computed: {
+    ...mapState({
+      uploadListForUI: 'uploadStatusListAudio',
+    })
+  },
   mounted() {
   },
   watch: {
@@ -269,8 +273,6 @@ export default {
       });
     },
     onFileChange(e) {
-      let uploadFileList = [];
-
       e.files.forEach((eachFile, i) => {
         if (eachFile.name.toLowerCase().indexOf("mp3") <= -1) {
           setTimeout(() => {
@@ -292,63 +294,55 @@ export default {
           return;
         }
 
-        let tmp = {
+        let itemInUploadList = {
           title: eachFile.name,
           ifKnowProgress: true,
           progress: 0,
           status: 'LOADING',
           statusStr: "正在上传素材",
           uid: `u_${this.$randomWord(true, 8, 8)}`,
+          abortHandler: null,
         };
-        this.uploadTaskList.push(tmp);
-        uploadFileList.push({
-          file: eachFile,
-          list: { ...tmp },
-        });
-      });
-
-      let uploadPromiseList = [];
-      uploadFileList.forEach((data, index) => {
-        let promise = new Promise((resolve, reject) => {
-          const handler = uploadMaterial(
-            {
-              file: data.file
-            },
-            {
-              type: TYPE,
-              uid: data.list.uid,
-            },
-            (response) => {
-              this.uploadTaskList[index].status = 'SUCCESS'
-              this.uploadTaskList[index].statusText = '素材上传成功'
-              resolve(response);
-            },
-            (err) => {
-              if (err.status === 0) { // 用户取消了上传任务。TODO：判断依据不够完美。
-                this.uploadTaskList[index].status = 'CANCELLED'
-                this.uploadTaskList[index].statusText = '已取消'
-              } else {
-                this.uploadTaskList[index].status = 'FAIL'
-                this.uploadTaskList[index].statusText = '素材上传失败'
-              }
-              reject(err);
-            },
-            (progress) => {
-              this.uploadTaskList[index].progress = progress
+        
+        itemInUploadList.abortHandler = uploadMaterial(
+          {
+            file: eachFile
+          },
+          {
+            type: TYPE,
+            uid: itemInUploadList.uid,
+          },
+          () => { // 上传成功
+            const index = this.uploadListForUI.findIndex((eachItem) => {
+              eachItem.uid === itemInUploadList.uid
+            })
+            this.uploadListForUI.splice(index, 1)
+            this.refreshListDebounced()
+          },
+          (err) => {
+            if (err.statusText === 'abort') { // 用户取消了上传任务。
+              const index = this.uploadListForUI.findIndex((eachItem) => {
+                eachItem.uid === itemInUploadList.uid
+              })
+              this.uploadListForUI.splice(index, 1)
+            } else {
+              itemInUploadList.status = 'FAIL'
+              itemInUploadList.statusText = '素材上传失败'
             }
-          );
-          this.uploadHandlerList.push(handler)
-        });
-        uploadPromiseList.push(promise);
-      });
-      Promise.allSettled(uploadPromiseList).then(() => {
-        this.uploadTaskList = []
-        this.uploadHandlerList = []
-        this.refreshListDebounced()
+          },
+          (progress) => {
+            itemInUploadList.progress = progress
+          }
+        );
+
+        this.uploadListForUI.push(itemInUploadList);
       });
     },
-    onCancelTask(index) {
-      this.uploadHandlerList[index].abort()
+    onCancelTask(uid) {
+      const index = this.uploadListForUI.findIndex((eachItem) => {
+        return eachItem.uid === uid
+      })
+      this.uploadListForUI[index].abortHandler.abort()
     },
     getMoreMaterialItem() {
       this.isRequestingMoreData = true

src/views/material/image/index.vue

@@ -90,7 +90,7 @@
           >
         </div>
       </tableList>
-      <UploadTaskList class="upload-list-new" v-show="uploadTaskList.length != 0" fileType="AUDIO" :taskList="uploadTaskList" @cancel-task="onCancelTask"></UploadTaskList>
+      <UploadTaskList class="upload-list-new" fileType="AUDIO" :taskList="uploadListForUI" @cancel-task="onCancelTask"></UploadTaskList>
       <div class="total-number" v-if="list.length !== 0 || hasMoreData">已加载{{list.length}}条</div>
       <div class="nodata" v-if="list.length == 0 && !hasMoreData && lastestUsedSearchKey">
         <img :src="$noresult" alt="" />
@@ -128,6 +128,7 @@ import Upload from "@/components/shared/uploads/UploadMultiple";
 import { changeByteUnit } from "@/utils/file";
 import preview from "../popup/preview";
 import { debounce } from "@/utils/other.js"
+import { mapState } from 'vuex';
 
 import {
   getMaterialList,
@@ -170,10 +171,13 @@ export default {
       list: [],
       hasMoreData: true,
       isRequestingMoreData: false,
-      uploadTaskList: [],
-      uploadHandlerList: [],
     };
   },
+  computed: {
+    ...mapState({
+      uploadListForUI: 'uploadStatusListImage',
+    })
+  },
   mounted() {
   },
   watch: {
@@ -269,8 +273,6 @@ export default {
       });
     },
     onFileChange(e) {
-      let uploadFileList = [];
-
       e.files.forEach((eachFile, i) => {
         if (
           eachFile.name.toLowerCase().indexOf("jpeg") <= -1 &&
@@ -296,65 +298,55 @@ export default {
           return;
         }
 
-        let tmp = {
+        let itemInUploadList = {
           title: eachFile.name,
           ifKnowProgress: true,
           progress: 0,
           status: 'LOADING',
           statusStr: "正在上传素材",
           uid: `u_${this.$randomWord(true, 8, 8)}`,
+          abortHandler: null,
         };
-        this.uploadTaskList.push(tmp);
-        uploadFileList.push({
-          file: eachFile,
-          list: { ...tmp },
-        });
-      });
-
-      let uploadPromiseList = [];
-      uploadFileList.forEach((data, index) => {
-        let promise = new Promise((resolve, reject) => {
-          const handler = uploadMaterial(
-            {
-              file: data.file
-            },
-            {
-              type: TYPE,
-              uid: data.list.uid,
-            },
-            (response) => {
-              this.uploadTaskList[index].status = 'SUCCESS'
-              this.uploadTaskList[index].statusText = '素材上传成功'
-              resolve(response);
-            },
-            (err) => {
-              if (err.status === 0) { // 用户取消了上传任务。TODO：判断依据不够完美。
-                this.uploadTaskList[index].status = 'CANCELLED'
-                this.uploadTaskList[index].statusText = '已取消'
-              } else {
-                this.uploadTaskList[index].status = 'FAIL'
-                this.uploadTaskList[index].statusText = '素材上传失败'
-              }
-              reject(err);
-            },
-            (progress) => {
-              this.uploadTaskList[index].progress = progress
+        
+        itemInUploadList.abortHandler = uploadMaterial(
+          {
+            file: eachFile
+          },
+          {
+            type: TYPE,
+            uid: itemInUploadList.uid,
+          },
+          () => { // 上传成功
+            const index = this.uploadListForUI.findIndex((eachItem) => {
+              eachItem.uid === itemInUploadList.uid
+            })
+            this.uploadListForUI.splice(index, 1)
+            this.refreshListDebounced()
+          },
+          (err) => {
+            if (err.statusText === 'abort') { // 用户取消了上传任务。
+              const index = this.uploadListForUI.findIndex((eachItem) => {
+                eachItem.uid === itemInUploadList.uid
+              })
+              this.uploadListForUI.splice(index, 1)
+            } else {
+              itemInUploadList.status = 'FAIL'
+              itemInUploadList.statusText = '素材上传失败'
             }
-          );
-          this.uploadHandlerList.push(handler)
-        });
-        uploadPromiseList.push(promise);
-      });
-      Promise.allSettled(uploadPromiseList).then(() => {
-        setTimeout(() => {
-          this.uploadTaskList = []
-          this.uploadHandlerList = []
-          this.refreshListDebounced()
-        }, 1000);
+          },
+          (progress) => {
+            itemInUploadList.progress = progress
+          }
+        );
+
+        this.uploadListForUI.push(itemInUploadList);
       });
     },
-    onCancelTask(index) {
-      this.uploadHandlerList[index].abort()
+    onCancelTask(uid) {
+      const index = this.uploadListForUI.findIndex((eachItem) => {
+        return eachItem.uid === uid
+      })
+      this.uploadListForUI[index].abortHandler.abort()
     },
     getMoreMaterialItem() {
       this.isRequestingMoreData = true

src/views/material/pano/index.vue

@@ -106,7 +106,7 @@
           </span>
         </div>
       </tableList>
-      <UploadTaskList class="upload-list-new" v-show="uploadTaskList.length != 0" fileType="AUDIO" :taskList="uploadTaskList" @cancel-task="onCancelTask"></UploadTaskList>
+      <UploadTaskList class="upload-list-new" fileType="IMAGE" :taskList="uploadListForUI" @cancel-task="onCancelTask"></UploadTaskList>
       <div class="total-number" v-if="list.length !== 0 || hasMoreData">已加载{{list.length}}条</div>
       <div class="nodata" v-if="list.length == 0 && !hasMoreData && lastestUsedSearchKey">
         <img :src="$noresult" alt="" />
@@ -151,6 +151,7 @@ import Upload from "@/components/shared/uploads/UploadMultiple";
 import { getImgWH, changeByteUnit } from "@/utils/file";
 import UploadTaskList from "../components/uploadList1.1.0.vue";
 import { debounce } from "@/utils/other.js"
+import { mapState } from 'vuex';
 
 import {
   getMaterialList,
@@ -178,7 +179,6 @@ export default {
   data() {
     return {
       config,
-      longPollingSwitch: false,
       showRename: false,
       showPreview: false,
       showCover: false,
@@ -202,14 +202,22 @@ export default {
       hasMoreData: true,
       isRequestingMoreData: false,
       uploadList: [],
-      uploadTaskList: [],
-      uploadHandlerList: [],
     };
   },
+  computed: {
+    ...mapState({
+      uploadListForUI: 'uploadStatusListPano',
+    }),
+    needLongPolling() {
+      return this.uploadListForUI.some((item) => {
+        return item.status === 'LOADING' && item.ifKnowProgress === false
+      })
+    }
+  },
   mounted() {
   },
   watch: {
-    longPollingSwitch: {
+    needLongPolling: {
       handler: function (newVal) {
         if (!newVal) {
           this.clearinter();
@@ -323,34 +331,26 @@ export default {
       });
     },
     _checkMStatus() {
-      let loadingTaskList = this.uploadTaskList.filter((item) => item.status === 'LOADING');
-      if (loadingTaskList.length > 0) {
+      let needPollingTaskList = this.uploadListForUI.filter((item) => item.status === 'LOADING' && item.ifKnowProgress === false);
+      if (needPollingTaskList.length > 0) {
         checkMStatus(
           {
-            ids: this.uploadTaskList.map((item) => item.backendId),
+            ids: needPollingTaskList.map((item) => item.backendId),
             islongpolling: true,
           },
           (res) => {
             // 1切图中，2失败，3成功
             res.data.forEach(eachRes => {
               if (eachRes.status === 2) {
-                const index = this.uploadTaskList.findIndex(eachTask => eachTask.backendId === eachRes.id)
-                index >= 0 && (this.uploadTaskList[index].status = 'FAIL')
-                index >= 0 && (this.uploadTaskList[index].statusText = '素材切图失败')
+                const index = this.uploadListForUI.findIndex(eachTask => eachTask.backendId === eachRes.id)
+                index >= 0 && (this.uploadListForUI[index].status = 'FAIL')
+                index >= 0 && (this.uploadListForUI[index].statusText = '素材切图失败')
               } else if (eachRes.status === 3) {
-                const index = this.uploadTaskList.findIndex(eachTask => eachTask.backendId === eachRes.id)
-                index >= 0 && (this.uploadTaskList[index].status = 'SUCCESS')
-                index >= 0 && (this.uploadTaskList[index].statusText = '切图成功')
+                const index = this.uploadListForUI.findIndex(eachTask => eachTask.backendId === eachRes.id)
+                index >= 0 && (this.uploadListForUI.splice(index, 1))
+                index >= 0 && this.refreshListDebounced()
               }
             });
-            if (!this.uploadTaskList.some((item) => item.status === 'LOADING')) {
-              this.longPollingSwitch = false;
-              setTimeout(() => {
-                this.uploadTaskList = []
-                this.uploadHandlerList = []
-                this.refreshListDebounced()
-              }, 1000);
-            }
           }
         );
       }
@@ -402,8 +402,6 @@ export default {
       });
     },
     onFileChange(e) {
-      let uploadFileList = [];
-
       e.files.forEach((eachFile, i) => {
         if (
           eachFile.name.toLowerCase().indexOf("jpeg") <= -1 &&
@@ -428,75 +426,54 @@ export default {
           return;
         }
 
-        let tmp = {
+        let itemInUploadList = {
           title: eachFile.name,
           ifKnowProgress: true,
           progress: 0,
           status: 'LOADING',
           statusStr: "正在上传素材",
           uid: `u_${this.$randomWord(true, 8, 8)}`,
+          abortHandler: null,
+          backendId: '',
         };
-        this.uploadTaskList.push(tmp);
-        uploadFileList.push({
-          file: eachFile,
-          list: { ...tmp },
-        });
-      });
 
-      let uploadPromiseList = [];
-      uploadFileList.forEach((data, index) => {
-        let promise = new Promise((resolve, reject) => {
-          const handler = uploadMaterial(
-            {
-              file: data.file
-            },
-            {
-              type: TYPE,
-              uid: data.list.uid,
-            },
-            (response) => {
-              if (response.data.id) {
-                this.uploadTaskList[index].statusText = '正在切图处理'
-                this.uploadTaskList[index].ifKnowProgress = false
-                this.uploadTaskList[index].backendId = response.data.id
-                resolve(response);
-              } else {
-                this.uploadTaskList[index].status = 'FAIL'
-                this.uploadTaskList[index].statusText = '素材上传失败'
-                reject('拿不到上传后文件id')
-              }
-            },
-            (err) => {
-              if (err.status === 0) { // 用户取消了上传任务。TODO：判断依据不够完美。
-                this.uploadTaskList[index].status = 'CANCELLED'
-                this.uploadTaskList[index].statusText = '已取消'
-              } else {
-                this.uploadTaskList[index].status = 'FAIL'
-                this.uploadTaskList[index].statusText = '素材上传失败'
-              }
-              reject(err);
-            },
-            (progress) => {
-              this.uploadTaskList[index].progress = progress
+        itemInUploadList.abortHandler = uploadMaterial(
+          {
+            file: eachFile
+          },
+          {
+            type: TYPE,
+            uid: itemInUploadList.uid,
+          },
+          (response) => { // 上传成功
+            itemInUploadList.statusText = '正在切图处理'
+            itemInUploadList.ifKnowProgress = false
+            itemInUploadList.backendId = response.data.id
+          },
+          (err) => {
+            if (err.statusText === 'abort') { // 用户取消了上传任务。
+              const index = this.uploadListForUI.findIndex((eachItem) => {
+                eachItem.uid === itemInUploadList.uid
+              })
+              this.uploadListForUI.splice(index, 1)
+            } else {
+              itemInUploadList.status = 'FAIL'
+              itemInUploadList.statusText = '素材上传失败'
             }
-          );
-          this.uploadHandlerList.push(handler)
-        });
-        uploadPromiseList.push(promise);
-      });
-      Promise.allSettled(uploadPromiseList).then(() => {
-        if (!this.uploadTaskList.some((item) => item.status === 'LOADING')) {
-          setTimeout(() => {
-            this.uploadTaskList = []
-            this.uploadHandlerList = []
-          }, 1000);
-        } else {
-          this.longPollingSwitch = true
-        }
-      });
+          },
+          (progress) => {
+            itemInUploadList.progress = progress
+          }
+        )
+
+        this.uploadListForUI.push(itemInUploadList);
+      })
     },
-    onCancelTask(index) {
-      this.uploadHandlerList[index].abort()
+    onCancelTask(uid) {
+      const index = this.uploadListForUI.findIndex((eachItem) => {
+        return eachItem.uid === uid
+      })
+      this.uploadListForUI[index].abortHandler.abort()
     },
     getMoreMaterialItem(islongpolling = null) {
       this.isRequestingMoreData = true

src/views/material/video/index.vue

@@ -91,7 +91,7 @@
           >
         </div>
       </tableList>
-      <UploadTaskList class="upload-list-new" v-show="uploadTaskList.length != 0" fileType="AUDIO" :taskList="uploadTaskList" @cancel-task="onCancelTask"></UploadTaskList>
+      <UploadTaskList class="upload-list-new" fileType="VIDEO" :taskList="uploadListForUI" @cancel-task="onCancelTask"></UploadTaskList>
       <div class="total-number" v-if="list.length !== 0 || hasMoreData">已加载{{list.length}}条</div>
       <div class="nodata" v-if="list.length == 0 && !hasMoreData && lastestUsedSearchKey">
         <img :src="$noresult" alt="" />
@@ -129,6 +129,7 @@ import { changeByteUnit } from "@/utils/file";
 import preview from "../popup/preview";
 import UploadTaskList from "../components/uploadList1.1.0.vue";
 import { debounce } from "@/utils/other.js"
+import { mapState } from 'vuex';
 
 import {
   getMaterialList,
@@ -172,10 +173,13 @@ export default {
       list: [],
       hasMoreData: true,
       isRequestingMoreData: false,
-      uploadTaskList: [],
-      uploadHandlerList: [],
     };
   },
+  computed: {
+    ...mapState({
+      uploadListForUI: 'uploadStatusListVideo',
+    })
+  },
   mounted() {
   },
   watch: {
@@ -267,8 +271,6 @@ export default {
       });
     },
     onFileChange(e) {
-      let uploadFileList = [];
-
       e.files.forEach((eachFile, i) => {
         if (eachFile.name.toLowerCase().indexOf("mp4") <= -1) {
           setTimeout(() => {
@@ -290,65 +292,55 @@ export default {
           return;
         }
 
-        let tmp = {
+        let itemInUploadList = {
           title: eachFile.name,
           ifKnowProgress: true,
           progress: 0,
           status: 'LOADING',
           statusStr: "正在上传素材",
           uid: `u_${this.$randomWord(true, 8, 8)}`,
+          abortHandler: null,
         };
-        this.uploadTaskList.push(tmp);
-        uploadFileList.push({
-          file: eachFile,
-          list: { ...tmp },
-        });
-      });
-
-      let uploadPromiseList = [];
-      uploadFileList.forEach((data, index) => {
-        let promise = new Promise((resolve, reject) => {
-          const handler = uploadMaterial(
-            {
-              file: data.file
-            },
-            {
-              type: TYPE,
-              uid: data.list.uid,
-            },
-            (response) => {
-              this.uploadTaskList[index].status = 'SUCCESS'
-              this.uploadTaskList[index].statusText = '素材上传成功'
-              resolve(response);
-            },
-            (err) => {
-              if (err.status === 0) { // 用户取消了上传任务。TODO：判断依据不够完美。
-                this.uploadTaskList[index].status = 'CANCELLED'
-                this.uploadTaskList[index].statusText = '已取消'
-              } else {
-                this.uploadTaskList[index].status = 'FAIL'
-                this.uploadTaskList[index].statusText = '素材上传失败'
-              }
-              reject(err);
-            },
-            (progress) => {
-              this.uploadTaskList[index].progress = progress
+        
+        itemInUploadList.abortHandler = uploadMaterial(
+          {
+            file: eachFile
+          },
+          {
+            type: TYPE,
+            uid: itemInUploadList.uid,
+          },
+          () => { // 上传成功
+            const index = this.uploadListForUI.findIndex((eachItem) => {
+              eachItem.uid === itemInUploadList.uid
+            })
+            this.uploadListForUI.splice(index, 1)
+            this.refreshListDebounced()
+          },
+          (err) => {
+            if (err.statusText === 'abort') { // 用户取消了上传任务。
+              const index = this.uploadListForUI.findIndex((eachItem) => {
+                eachItem.uid === itemInUploadList.uid
+              })
+              this.uploadListForUI.splice(index, 1)
+            } else {
+              itemInUploadList.status = 'FAIL'
+              itemInUploadList.statusText = '素材上传失败'
             }
-          );
-          this.uploadHandlerList.push(handler)
-        });
-        uploadPromiseList.push(promise);
-      });
-      Promise.allSettled(uploadPromiseList).then(() => {
-        setTimeout(() => {
-          this.uploadTaskList = []
-          this.uploadHandlerList = []
-          this.refreshListDebounced()
-        }, 1000);
+          },
+          (progress) => {
+            itemInUploadList.progress = progress
+          }
+        );
+
+        this.uploadListForUI.push(itemInUploadList);
       });
     },
-    onCancelTask(index) {
-      this.uploadHandlerList[index].abort()
+    onCancelTask(uid) {
+      const index = this.uploadListForUI.findIndex((eachItem) => {
+        return eachItem.uid === uid
+      })
+      this.uploadListForUI[index].abortHandler.abort()
     },
     getMoreMaterialItem() {
       this.isRequestingMoreData = true