【我的素材】图片、视频、音频页引入上传列表组件

src/views/material/audio/index.vue

@@ -26,17 +26,6 @@
             :limit="20"
             @file-change="onFileChange"
           ></upload>
-          <template v-if="showList">
-            <UploadList
-              @close="
-                () => {
-                  showList = false;
-                }
-              "
-              :list="uploadList"
-              @del="delUploadItem"
-            />
-          </template>
         </button>
       </div>
       <div class="filter">
@@ -102,7 +91,7 @@
           >
         </div>
       </tableList>
-      <UploadListNew class="upload-list-new"></UploadListNew>
+      <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="" />
@@ -134,8 +123,7 @@ import rename from "../popup/rename";
 import vAudio from "@/components/audio";
 import Upload from "@/components/shared/uploads/UploadMultiple";
 import { changeByteUnit } from "@/utils/file";
-import UploadList from "../components/uploadList.vue";
-import UploadListNew from "../components/uploadList1.1.0.vue";
+import UploadTaskList from "../components/uploadList1.1.0.vue";
 import { debounce } from "@/utils/other.js"
 
 import {
@@ -154,8 +142,7 @@ export default {
     rename,
     Upload,
     vAudio,
-    UploadList,
-    UploadListNew,
+    UploadTaskList,
   },
   data() {
     return {
@@ -179,7 +166,8 @@ export default {
       list: [],
       hasMoreData: true,
       isRequestingMoreData: false,
-      uploadList: [],
+      uploadTaskList: [],
+      uploadHandlerList: [],
     };
   },
   mounted() {
@@ -227,9 +215,6 @@ export default {
         }
       );
     },
-    delUploadItem(index) {
-      ~index && this.uploadList.splice(index, 1);
-    },
     del(item) {
       this.$confirm({
         content: "确定要删除素材吗？",
@@ -276,103 +261,88 @@ export default {
         },
       });
     },
-    onFileChange(file) {
-      let canUploadList = [];
-
-      // 对选中的文件按照格式限制和名称长度限制，做过滤，name存到this.uploadList，整个file对象存到canUploadList。
-      file.files.forEach((item, i) => {
-        let tmp = {
-          statusStr: "上传中",
-          status: 4,
-          uid: `u_${this.$randomWord(true, 8, 8)}`,
-          name: item.name,
-        };
+    onFileChange(e) {
+      let uploadFileList = [];
 
-        if (item.name.toLowerCase().indexOf("mp3") <= -1) {
+      e.files.forEach((eachFile, i) => {
+        if (eachFile.name.toLowerCase().indexOf("mp3") <= -1) {
           setTimeout(() => {
             this.$msg({
-              message: `“${item.name}”格式错误，请上传20MB以内、mp3格式的音频`,
+              message: `“${eachFile.name}”格式错误，请上传20MB以内、mp3格式的音频`,
               type: "error",
             });
           }, 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字以内的音频`,
+              message: `“${eachFile.name}”名称过长，请上传标题在50字以内的音频`,
               type: "error",
             });
           }, 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 },
         });
       });
 
-      // Promise对象数组，每个Promise都会马上被canUploadList里的元素resolve。
-      let p = [];
-      canUploadList.forEach((i) => {
-        let promise = new Promise((resolve) => {
-          resolve(i);
+      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)
         });
-        p.push(promise);
+        uploadPromiseList.push(promise);
       });
-
-      Promise.all(p).then((result) => {
-        // pp保存了每个文件的上传任务的Promise对象。
-        let pp = [];
-        p.length > 0 &&
-          result.forEach((data) => {
-            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);
-                }
-              );
-            });
-            pp.push(promise);
-          });
-        pp.length > 0 &&
-          // 上传任务都结束后，this.uploadList里记录的所有任务状态都更新到5，this.uploadList里删除那些结束了的任务，更新列表数据。
-          Promise.all(pp).then((response) => {
-            if (response.length > 0) {
-              this.uploadList.forEach((item) => {
-                item.status = 5;
-              });
-
-              response.forEach((item) => {
-                let idx = this.uploadList.findIndex(
-                  (sub) => sub.uid == item.data.tempId
-                );
-                if (item.code == 0) {
-                  if (idx > -1) {
-                    this.uploadList.splice(idx, 1);
-                  }
-                }
-              });
-              this.refreshListDebounced()
-            }
-          });
+      Promise.allSettled(uploadPromiseList).then(() => {
+        this.uploadTaskList = []
+        this.uploadHandlerList = []
+        this.refreshListDebounced()
       });
     },
+    onCancelTask(index) {
+      this.uploadHandlerList[index].abort()
+    },
     getMoreMaterialItem() {
       this.isRequestingMoreData = true
       const lastestUsedSearchKey = this.searchKey

src/views/material/image/index.vue

@@ -25,17 +25,6 @@
             :limit="10"
             @file-change="onFileChange"
           ></upload>
-          <template v-if="showList">
-            <UploadList
-              @close="
-                () => {
-                  showList = false;
-                }
-              "
-              :list="uploadList"
-              @del="delUploadItem"
-            />
-          </template>
         </button>
       </div>
       <div class="filter">
@@ -101,6 +90,7 @@
           >
         </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="" />
@@ -133,7 +123,7 @@ import tableList from "@/components/table";
 import crumbs from "@/components/crumbs";
 import { data } from "./image";
 import rename from "../popup/rename";
-import UploadList from "../components/uploadList";
+import UploadTaskList from "../components/uploadList1.1.0.vue";
 import Upload from "@/components/shared/uploads/UploadMultiple";
 import { changeByteUnit } from "@/utils/file";
 import preview from "../popup/preview";
@@ -155,7 +145,7 @@ export default {
     rename,
     Upload,
     preview,
-    UploadList,
+    UploadTaskList,
   },
   data() {
     return {
@@ -179,7 +169,8 @@ export default {
       list: [],
       hasMoreData: true,
       isRequestingMoreData: false,
-      uploadList: [],
+      uploadTaskList: [],
+      uploadHandlerList: [],
     };
   },
   mounted() {
@@ -224,9 +215,6 @@ export default {
         }
       );
     },
-    delUploadItem(index) {
-      ~index && this.uploadList.splice(index, 1);
-    },
     del(item) {
       this.$confirm({
         content: "确定要删除素材吗？",
@@ -273,94 +261,94 @@ export default {
         },
       });
     },
-    onFileChange(file) {
-      let canUploadList = [];
+    onFileChange(e) {
+      let uploadFileList = [];
 
-      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 && item.type.indexOf("png") <= -1) {
+      e.files.forEach((eachFile, i) => {
+        if (
+          eachFile.name.toLowerCase().indexOf("jpeg") <= -1 &&
+          eachFile.name.toLowerCase().indexOf("jpg") <= -1 &&
+          eachFile.name.toLowerCase().indexOf("png") <= -1
+        ) {
           setTimeout(() => {
             this.$msg({
-              message: `“${item.name}”格式错误，请上传10MB以内、jpg/png格式的图片`,
+              message: `“${eachFile.name}”格式错误，请上传10MB以内、jpg/png格式的图片`,
               type: "error",
             });
           }, 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字以内的图片`,
+              message: `“${eachFile.name}”名称过长，请上传标题在50字以内的图片`,
               type: "error",
             });
           }, 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 = new Promise((resolve) => {
-          resolve(i);
+      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)
         });
-        p.push(promise);
+        uploadPromiseList.push(promise);
       });
-
-      Promise.all(p).then((result) => {
-        let pp = [];
-        p.length > 0 &&
-          result.forEach((data) => {
-            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);
-                }
-              );
-            });
-            pp.push(promise);
-          });
-        pp.length > 0 &&
-          Promise.all(pp).then((response) => {
-            if (response.length > 0) {
-              this.uploadList.forEach((item) => {
-                item.status = 5;
-              });
-              response.forEach((item) => {
-                let idx = this.uploadList.findIndex(
-                  (sub) => sub.uid == item.data.tempId
-                );
-                if (item.code == 0) {
-                  if (idx > -1) {
-                    this.uploadList.splice(idx, 1);
-                  }
-                }
-              });
-              this.refreshListDebounced()
-            }
-          });
+      Promise.allSettled(uploadPromiseList).then(() => {
+        setTimeout(() => {
+          this.uploadTaskList = []
+          this.uploadHandlerList = []
+          this.refreshListDebounced()
+        }, 1000);
       });
     },
+    onCancelTask(index) {
+      this.uploadHandlerList[index].abort()
+    },
     getMoreMaterialItem() {
       this.isRequestingMoreData = true
       const lastestUsedSearchKey = this.searchKey

src/views/material/video/index.vue

@@ -25,17 +25,6 @@
             :limit="200"
             @file-change="onFileChange"
           ></upload>
-          <template v-if="showList">
-            <UploadList
-              @close="
-                () => {
-                  showList = false;
-                }
-              "
-              :list="uploadList"
-              @del="delUploadItem"
-            />
-          </template>
         </button>
       </div>
       <div class="filter">
@@ -102,6 +91,7 @@
           >
         </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="" />
@@ -137,7 +127,7 @@ import rename from "../popup/rename";
 import Upload from "@/components/shared/uploads/UploadMultiple";
 import { changeByteUnit } from "@/utils/file";
 import preview from "../popup/preview";
-import UploadList from "../components/uploadList";
+import UploadTaskList from "../components/uploadList1.1.0.vue";
 import { debounce } from "@/utils/other.js"
 
 import {
@@ -155,7 +145,7 @@ export default {
     preview,
     crumbs,
     rename,
-    UploadList,
+    UploadTaskList,
     Upload,
   },
   data() {
@@ -181,7 +171,8 @@ export default {
       list: [],
       hasMoreData: true,
       isRequestingMoreData: false,
-      uploadList: [],
+      uploadTaskList: [],
+      uploadHandlerList: [],
     };
   },
   mounted() {
@@ -222,9 +213,6 @@ export default {
         }
       );
     },
-    delUploadItem(index) {
-      ~index && this.uploadList.splice(index, 1);
-    },
     del(item) {
       this.$confirm({
         content: "确定要删除素材吗？",
@@ -271,93 +259,90 @@ 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("mp4") <= -1) {
+    onFileChange(e) {
+      let uploadFileList = [];
+
+      e.files.forEach((eachFile, i) => {
+        if (eachFile.name.toLowerCase().indexOf("mp4") <= -1) {
           setTimeout(() => {
             this.$msg({
-              message: `“${item.name}”格式错误，请上传200MB以内、mp4格式的视频`,
+              message: `“${eachFile.name}”格式错误，请上传200MB以内、mp4格式的视频`,
               type: "error",
             });
-          }, 100);
+          }, 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字以内的视频`,
+              message: `“${eachFile.name}”名称过长，请上传标题在50字以内的视频`,
               type: "error",
             });
-          }, 100);
+          }, 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 = new Promise((resolve) => {
-          resolve(i);
+      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)
         });
-        p.push(promise);
+        uploadPromiseList.push(promise);
       });
-
-      Promise.all(p).then((result) => {
-        let pp = [];
-        p.length > 0 &&
-          result.forEach((data) => {
-            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);
-                }
-              );
-            });
-            pp.push(promise);
-          });
-        pp.length > 0 &&
-          Promise.all(pp).then((response) => {
-            if (response.length > 0) {
-              this.uploadList.forEach((item) => {
-                item.status = 5;
-              });
-              response.forEach((item, i) => {
-                let idx = this.uploadList.findIndex(
-                  (sub) => sub.uid == item.data.tempId
-                );
-                if (item.code == 0) {
-                  if (idx > -1) {
-                    this.uploadList.splice(idx, 1);
-                  }
-                }
-              });
-              this.refreshListDebounced()
-            }
-          });
+      Promise.allSettled(uploadPromiseList).then(() => {
+        setTimeout(() => {
+          this.uploadTaskList = []
+          this.uploadHandlerList = []
+          this.refreshListDebounced()
+        }, 1000);
       });
     },
+    onCancelTask(index) {
+      this.uploadHandlerList[index].abort()
+    },
     getMoreMaterialItem() {
       this.isRequestingMoreData = true
       const lastestUsedSearchKey = this.searchKey