vue+elementUi文件上传列表、断点续传、继续、暂停、every、some、forceUpdate、substring、setInterval、unshift、lastIndexOf、pop
目录1、版本一1.1、前言1.2、html代码1.3、JavaScript代码1.4、css代码2、版本二2.1、前言2.2、html代码2.3、JavaScript代码2.4、css代码1、版本一1.1、前言关键注解1、isShow变量的作用是实现DOM的销毁与重建，在尝试能尝试的所有方案后，页面依然不能根据数据变换而刷新，所以只能通过销毁和重建的方式更新页面。2、if (row.fileSta
·
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">上传列表</p>
<div class="head_box">
<el-upload
action=""
:auto-upload="false"
:on-change="handleChange"
:show-file-list="false"
>
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
<div class="head_btn" v-if="isShow">
<el-button
class="tag"
type="primary"
plain
:disabled="
fileList.length === 0 ||
fileList.every((item) => item.fileStatus === 5) ||
!fileList.some(
(item) => item.fileStatus === 3 || item.fileStatus === 4)
"
@click="allContinueUpload"
>全部继续</el-button>
<el-button
class="tag"
type="info"
plain
:disabled="
fileList.length === 0 ||
fileList.every((item) => item.fileStatus === 5) ||
!fileList.some(
(item) => item.fileStatus === 1 || item.fileStatus === 2)
"
@click="allSuspendUpload"
>全部暂停</el-button>
<el-button
class="tag"
type="danger"
plain
:disabled="fileList.length === 0"
@click="allCancelUpload"
>全部取消</el-button>
</div>
</div>
<div class="table_box" v-if="isShow">
<el-table
:data="fileList"
style="width: 100%"
:row-key="(row) => row.uid"
border
>
<el-table-column prop="uid" label="uid" />
<el-table-column prop="fileName" label="文件名" />
<el-table-column prop="fileType" label="文件类型" />
<el-table-column label="文件大小">
<template #default="scope">
<p>转换前：{{ scope.row.fileSizeOrigin }}</p>
<p>转换后：{{ scope.row.fileSize }}</p>
</template>
</el-table-column>
<el-table-column prop="createDate" label="创建时间" />
<el-table-column label="文件状态">
<!-- 1：上传中 2：等待上传 3：已暂停 4：上传失败 5：已完成 -->
<template #default="scope">
<p v-if="[1].includes(scope.row.fileStatus)" class="percentage">
{{ scope.row.percentage }}%
</p>
<p v-else>
{{ ["等待上传", "已暂停", "上传失败", "已完成"][scope.row.fileStatus - 2] }}
</p>
</template>
</el-table-column>
<el-table-column label="操作" align="center">
<template slot-scope="scope">
<div class="head_btn">
<el-tag
class="tag"
v-if="scope.row.fileStatus == 3"
@click.stop="continueUpload(scope.row)"
>继续</el-tag>
<el-tag
class="tag"
type="info"
v-if="[1, 2].includes(scope.row.fileStatus)"
@click.stop="suspendUpload(scope.row)"
>暂停</el-tag>
<el-tag
class="tag"
type="danger"
@click.stop="cancelUpload(scope.row)"
>取消</el-tag>
</div>
</template>
</el-table-column>
</el-table>
</div>
</div>
</template>
1.3、JavaScript代码
export default {
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代码
研发中
前往低代码交流专区
更多推荐
13
0- 0
已为社区贡献13条内容
所有评论(0)