vue+elementUi文件上传列表、断点续传、继续、暂停、every、some、forceUpdate、substring、setInterval、unshift、lastIndexOf、pop

1、版本一 1.1、前言

关键注解

1、isShow变量的作用是实现DOM的销毁与重建，在尝试能尝试的所有方案后，页面依然不能根据数据变换而刷新，所以只能通过销毁和重建的方式更新页面。 2、if (row.fileStatus !== 5) { }当已经上传成功后，点击全部继续或全部暂停，不在改变其状态，就是防止状态混乱。

需求

01、实现断点续传列表。 02、文件有五个状态，分别是上传中、等待上传、已暂停、上传失败和已完成。 03、点击文件暂停就终止上传。 04、点击文件继续会从上次继续的地方开始上传。 05、点击文件取消就是删除文件。 06、全部暂停就是暂停列表里所有的文件。 07、全部继续就是继续列表里所有未上传完成的文件。 08、全部取消就是删除文件列表所有文件。 09、每次只能同时上传两个文件。 10、还没上传完成，且当前已经有两个文件的状态为正在上传，那么点击继续的文件将被放到等待上传的队列中。 11、当上传完成后轮巡文件列表是否存在状态为等待上传的文件，如果有就自动继续上传。 12、当点击暂停时，需要轮巡文件列表是否存在状态为等待上传的文件，如果有就自动继续上传。 13、当点击取消时，需要轮巡文件列表是否存在状态为等待上传的文件，如果有就自动继续上传。

1.2、html代码

<template> <div> <p class="title">上传列表{ scope.row.fileSizeOrigin }}{ scope.row.fileSize }} <template #default="scope"> <p v-if="[1].includes(scope.row.fileStatus)" class="percentage"> {{ scope.row.percentage }}% { ["等待上传", "已暂停", "上传失败", "已完成"][scope.row.fileStatus - 2] }}  name: "uploadList", data() { return { fileList: [], isShow: true, }; }, methods: { // 全部继续上传 allContinueUpload() { this.allContinueUploadSuspendUpload(1); }, // 全部暂停上传 allSuspendUpload() { this.allContinueUploadSuspendUpload(2); }, // 封装全部继续上传和暂停上传 allContinueUploadSuspendUpload(type) { let fileList = this.fileList; for (let i = 0; i < fileList.length; i++) { const item = fileList[i]; if (type === 1) { this.continueUpload(item); } else { this.suspendUpload(item); } } }, // 全部取消上传 allCancelUpload() { this.encapsulationCancelUpload({}, 2); }, // 封装全部取消上传和取消上传 encapsulationCancelUpload(row, type) { this.$confirm("此操作将永久删除该文件, 是否继续?", "删除", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning", }) .then(() => { if (type == 1) { let i = this.fileList.findIndex((item) => item.uid === row.uid); if (i >= 0) { this.fileList.splice(i, 1); this.$forceUpdate(); this.$message({ type: "success", message: "删除成功!", }); this.autoUpload(); } } else { this.fileList = []; } }) .catch(() => { this.$message({ type: "info", message: "已取消删除", }); }); }, // 取消上传 cancelUpload(row) { this.encapsulationCancelUpload(row, 1); }, // 暂停上传 suspendUpload(row) { if (row.fileStatus !== 5) { row.fileStatus = 3; this.isShow = false; this.$nextTick(() => (this.autoUpload(), (this.isShow = true), clearInterval(row.time))); } }, // 继续上传 continueUpload(row) { this.isShow = false; if (row.fileStatus !== 5) { if (this.taskExecution() < 2) { row.fileStatus = 1; this.$nextTick(() => { this.isShow = true; row.time = setInterval(() => { if (row.percentage >= 100) { this.isShow = false; row.fileStatus = 5; this.$nextTick(() => { this.isShow = true; this.autoUpload(); clearInterval(row.time); }); } row.percentage += 5; }, 1000); }); } else { row.fileStatus = 2; this.$nextTick(() => (this.isShow = true)); } } }, // 封装检测任务列表当前正在执行的任务 taskExecution() { let fileList = this.fileList, num = 0; for (let i = 0; i < fileList.length; i++) { let item = fileList[i]; if (item.fileStatus === 1) num += 1; } return num; }, // 封装自动上传 autoUpload() { let fileList = this.fileList; for (let i = 0; i < fileList.length; i++) { const item = fileList[i]; if (item.fileStatus === 2 && this.taskExecution() < 2) this.continueUpload(item); } }, // 选择文件 handleChange(event) { event.fileSizeOrigin = event.size + "B"; event.fileSize = this.$functionalModule.bytesToSize(event.size); event.fileName = event.name.substring(0, event.name.lastIndexOf(".")); event.fileType = event.name.split(".").pop(); event.createDate = this.$functionalModule.timeDateFormat(); this.fileList.unshift(event); // 继续上传 this.continueUpload(event); }, }, }; 

1.4、css代码

.title { color: #606266; font-size: 24px; } .head_box { display: flex; justify-content: space-between; align-items: center; } .head_btn { .tag { margin-left: 10px; cursor: pointer; } } .table_box { margin-top: 17px; .percentage { color: #409eff; } } 

2、版本二 2.1、前言

研发中

2.2、html代码

研发中

2.3、JavaScript代码

研发中

2.4、css代码

研发中