【我的素材】全景图片页使用上传列表组件（还没有查询切图状态的功能）

src/views/material/pano/index.vue

@@ -25,17 +25,6 @@
             :limit="120"
             @file-change="onFileChange"
           ></upload>
-          <template v-if="showList">
-            <UploadList
-              @close="
-                () => {
-                  showList = false;
-                }
-              "
-              :list="uploadList"
-              @del="delUploadItem"
-            />
-          </template>
         </button>
       </div>
       <div class="filter">
@@ -117,6 +106,7 @@
           </span>
         </div>
       </tableList>
+      <UploadTaskList class="upload-list-new" v-show="uploadTaskList.length != 0" fileType="AUDIO" :taskList="uploadTaskList" @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="" />
@@ -159,7 +149,7 @@ import preview from "../popup/preview";
 import cover from "../popup/cover";
 import Upload from "@/components/shared/uploads/UploadMultiple";
 import { getImgWH, changeByteUnit } from "@/utils/file";
-import UploadList from "../components/uploadList";
+import UploadTaskList from "../components/uploadList1.1.0.vue";
 import { debounce } from "@/utils/other.js"
 
 import {
@@ -185,7 +175,7 @@ export default {
     cover,
     preview,
     Upload,
-    UploadList,
+    UploadTaskList,
   },
   data() {
     return {
@@ -213,6 +203,8 @@ export default {
       hasMoreData: true,
       isRequestingMoreData: false,
       uploadList: [],
+      uploadTaskList: [],
+      uploadHandlerList: [],
     };
   },
   mounted() {
@@ -329,10 +321,6 @@ export default {
         }
       });
     },
-    delUploadItem(index) {
-      ~index && this.uploadList.splice(index, 1);
-    },
-
     _checkMStatus(islongpolling = null) {
       let ids = this.uploadList.filter((item) => !!item.id);
       if (ids.length > 0) {
@@ -408,114 +396,91 @@ export default {
         },
       });
     },
-    onFileChange(file) {
-      let canUploadList = [];
-      file.files.forEach((item,i)=>{
-        let tmp = {
-          statusStr: "上传中",
-          status: 4,
-          uid: `u_${this.$randomWord(true, 8, 8)}`,
-          name: item.name,
-        };
-        if (item.type.indexOf("jpeg") <= -1) {
+    onFileChange(e) {
+      let uploadFileList = [];
+
+      e.files.forEach((eachFile, i) => {
+        if (
+          eachFile.name.toLowerCase().indexOf("jpeg") <= -1 &&
+          eachFile.name.toLowerCase().indexOf("jpg") <= -1
+        ) {
           setTimeout(() => {
             this.$msg({
-              message: `“${item.name}”格式错误，请上传2:1、120MB以内、jpg格式的全景图片`,
-              type: 'error'
+              message: `“${eachFile.name}”格式错误，请上传2:1、120MB以内、jpg格式的全景图片`,
+              type: "error",
             });
-          }, i*100);
-          return
+          }, i * 100);
+          return;
         }
-        let tname = item.name.substring(0, item.name.lastIndexOf("."));
 
-        if (tname.length > 50) {
+        if (eachFile.name.substring(0, eachFile.name.lastIndexOf(".")).length > 50) {
           setTimeout(() => {
             this.$msg({
-              message: `“${item.name}”名称过长，请上传标题在50字以内的全景图片`,
-              type: 'error'
+              message: `“${eachFile.name}”名称过长，请上传标题在50字以内的全景图片`,
+              type: "error",
             });
-          }, i*100);
-          return
+          }, i * 100);
+          return;
         }
-        this.uploadList.push(tmp);
-        canUploadList.push({
-          file: item,
+
+        let tmp = {
+          title: eachFile.name,
+          ifKnowProgress: true,
+          progress: 0,
+          status: 'LOADING',
+          statusStr: "正在上传素材",
+          uid: `u_${this.$randomWord(true, 8, 8)}`,
+        };
+        this.uploadTaskList.push(tmp);
+        uploadFileList.push({
+          file: eachFile,
           list: { ...tmp },
         });
-      })
-
-      // 检查宽高比的任务队列
-      let p = [];
-      canUploadList.forEach((i) => {
-        let promise = getImgWH(i);
-        p.push(promise);
       });
 
-      Promise.all(p).then((result) => {
-        // 上传任务队列
-        let pp = [];
-        p.length > 0 &&
-          result.forEach((data) => {
-            // 剔除图像宽高比不符合要求的那些上传任务
-            let { width, height } = data.WH;
-            if (width != 2 * height) {
-              let idx = this.uploadList.findIndex(
-                (sub) => sub.uid == data.list.uid
-              );
-              ~idx && this.uploadList.splice(idx, 1);
-              return this.$msg({
-                message: `“${data.file.name}”格式错误，请上传2:1、120MB以内、jpg格式的全景图片`,
-                type: 'error'
-              });
-            }
-
-            // 上传
-            let params = {};
-            params["file"] = data.file;
-            let promise = new Promise((resolve, reject) => {
-              uploadMaterial(
-                params,
-                {
-                  type: TYPE,
-                  uid: data.list.uid,
-                },
-                (response) => {
-                  resolve(response);
-                },
-                (err) => {
-                  reject(err);
-                },
-                (progress) => {
-                  console.log('progress: ', progress);
-                }
-              );
-            });
-            pp.push(promise);
-          });
-
-        // 所有上传任务结束后，改变this.uploadList里各任务状态，并把返回的任务结果添上去，并开始long polling
-        pp.length > 0 &&
-          Promise.all(pp).then((response) => {
-            if (response.length > 0) {
-              response.forEach((item, i) => {
-                this.uploadList[i].status = 5;
-                let idx = this.uploadList.findIndex(sub=>sub.uid == item.data.tempId)
-                if (idx>-1) {
-                  if (item.code != 0) {
-                    this.uploadList[idx].status = 5;
-                  } else {
-                    this.uploadList[idx] = {
-                      ...this.uploadList[idx],
-                      ...item.data,
-                    };
-                    this.longPollingSwitch = true;
-                  }
-                }
-              });
+      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
             }
-          });
+          );
+          this.uploadHandlerList.push(handler)
+        });
+        uploadPromiseList.push(promise);
+      });
+      Promise.allSettled(uploadPromiseList).then(() => {
+        this.uploadTaskList = []
+        this.uploadHandlerList = []
+        this.refreshListDebounced()
       });
     },
+    onCancelTask(index) {
+      this.uploadHandlerList[index].abort()
+    },
     getMoreMaterialItem(islongpolling = null) {
       this.isRequestingMoreData = true
       const lastestUsedSearchKey = this.searchKey