Upload() {
if (this.fileList && this.fileList.length == 0) {
this.$message({
message: "请选择上传的文件",
type: "warning",
}, 2000)
return
}
for (let i = 0; i < this.fileList.length; i++) {
setTimeout(() => {
let file = this.fileList[i];
// 每个文件切片大小定为5MB
let sliceSize = 0.5 * 1024 * 1024;
// 文件大小限制为最大1个G,可根据需求修改
let maxfilesizes = 1 * 1024 * 1024 * 1024;
const blob = file;
const fileSize = blob.size; // 文件大小
const fileName = blob.name; // 文件名
//计算文件切片总数,Math.ceil向上取整数
const totalSlice = Math.ceil(fileSize / sliceSize);
if (fileSize <= maxfilesizes) {
// 循环上传
for (let j = 0; j < totalSlice; j++) {
let start = j * sliceSize;
let chunk = blob.raw.slice(start, Math.min(fileSize, start + sliceSize));
console.log("每个切片的信息:", chunk);
const formData = new FormData();
formData.append("file", chunk);
formData.append("fileName", fileName);
formData.append("size", fileSize);
formData.append("totalNo", totalSlice);
formData.append("no", j + 1);
formData.append("file_temp_name", Math.round(new Date().getTime() / 1000) + Math.floor(Math.random() * 10000));
// 调用上传接口
API.postUpload(formData).then(res => {
// 判断当前文件的最后一个切片是否已经上传完成
if (i + 1 == this.fileList.length && j + 1 == totalSlice) {
// 成功上传的操作
}
})
}
}
}, (i + 1) * 1000);
以上代码实现了文件上传功能。首先,它检查文件列表是否为空,如果为空,则提示用户选择文件并返回。
若文件列表不为空,则通过循环遍历文件列表,依次处理每个文件。
接着,设置文件切片大小为0.5MB,文件大小限制为最大1GB。
接下来,获取当前文件的大小和文件名,并计算文件需要被切割成多少个切片。
如果文件大小不超过最大文件大小限制,则通过循环将文件拆分成切片并上传。
每个切片的信息都会被打印输出。
上传前需要创建一个FormData对象,并添加需要传递给后端的参数和切片数据。
然后,调用上传接口进行上传操作。
当所有文件的所有切片上传完成时,执行成功上传的操作。
需要注意的是,在代码中使用了setTimeout函数来模拟延时上传,以防止一次性上传大量文件导致浏览器卡顿。每个文件上传的延时时间逐渐增加,以避免同时上传多