共计 5139 个字符，预计需要花费 13 分钟才能阅读完成。
前言
平时业务需要：上传 图片 、Excel 等，毕竟几 M 的大小能够很快就上传到服务器。
针对于上传 视频 等大文件几百 M 或者几 G 的大小，就须要期待比拟长的工夫。
这就产生了对应的解决办法，对于大文件上传时的 暂停 、 断网 、 网络较差 的状况下，应用 切片 + 断点续传 就可能很好的应答上述的状况
计划剖析
-
切片
- 就是对上传视频进行切分，具体操作为：
-
File.slice(start,end)：返回新的 blob 对象
- 拷贝 blob 的起始字节
- 拷贝 blob 的完结字节
-
断点续传
- 每次切片上传之前，申请服务器接口，读取雷同文件的已上传切片数
- 上传的是新文件，服务端则返回 0，否则返回已上传切片数
具体解决流程
该 demo 提供关键点思路及办法，其余性能如：文件限度 ，lastModifiedDate 校验文件重复性， 缓存文件定期革除 等性能扩大都能够在此代码根底上增加。
html 局部
<input class="video" type="file" />
<button type="submit" onclick="handleVideo(event,'.video','video')">
提交
</button>
script 局部
let count = 0; // 记录须要上传的文件下标
const handleVideo = async (event, name, url) => {
// 阻止浏览器默认表单事件
event.preventDefault();
let currentSize = document.querySelector("h2");
let files = document.querySelector(name).files;
// 默认切片数量
const sectionLength = 100;
// 首先申请接口，获取服务器是否存在此文件
// count 为 0 则是第一次上传，count 不为 0 则服务器存在此文件，返回已上传的切片数
count = await handleCancel(files[0]);
// 申明寄存切片的数组对象
let fileCurrent = [];
// 循环 file 文件对象
for (const file of [...files]) {
// 得出每个切片的大小
let itemSize = Math.ceil(file.size / sectionLength);
// 循环文件 size，文件 blob 存入数组
let current = 0;
for (current; current < file.size; current += itemSize) {fileCurrent.push({ file: file.slice(current, current + itemSize) });
}
// axios 模仿手动勾销申请
const CancelToken = axios.CancelToken;
const source = CancelToken.source();
// 当断点续传时，解决切片数量，已上传切片则不须要再次申请上传
fileCurrent =
count === 0 ? fileCurrent : fileCurrent.slice(count, sectionLength);
// 循环切片申请接口
for (const [index, item] of fileCurrent.entries()) {
// 模仿申请暂停 || 网络断开
if (index > 90) {source.cancel("勾销申请");
}
// 存入文件相干信息
// file 为切片 blob 对象
// filename 为文件名
// index 为以后切片数
// total 为总切片数
let formData = new FormData();
formData.append("file", item.file);
formData.append("filename", file.name);
formData.append("total", sectionLength);
formData.append("index", index + count + 1);
await axios({url: `http://localhost:8080/${url}`,
method: "POST",
data: formData,
cancelToken: source.token,
})
.then((response) => {
// 返回数据显示进度
currentSize.innerHTML = ` 进度 ${response.data.size}%`;
})
.catch((err) => {console.log(err);
});
}
}
};
// 申请接口，查问上传文件是否存在
// count 为 0 示意不存在，count 不为 0 则已上传对应切片数
const handleCancel = (file) => {
return axios({
method: "post",
url: "http://localhost:8080/getSize",
headers: {"Content-Type": "application/json; charset = utf-8"},
data: {fileName: file.name,},
})
.then((res) => {return res.data.count;})
.catch((err) => {console.log(err);
});
};
相干 nodejs 进阶视频解说：进入学习
node 服务端 局部
// 应用 express 构建服务器 api
const express = require("express");
// 引入上传文件逻辑代码
const upload = require("./upload_file");
// 解决所有响应，设置跨域
app.all("*", (req, res, next) => {res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "X-Requested-With");
res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
res.header("Access-Control-Allow-Headers", "Content-Type, X-Requested-With");
res.header("X-Powered-By", "3.2.1");
res.header("Content-Type", "application/json;charset=utf-8");
next();});
const app = express();
app.use(bodyParser.json({ type: "application/*+json"}));
// 视频上传（查问以后切片数）app.post("/getSize", upload.getSize);
// 视频上传接口
app.post("/video", upload.video);
// 开启本地端口侦听
app.listen(8080);
- upload_file
// 文件上传模块
const formidable = require("formidable");
// 文件系统模块
const fs = require("fs");
// 零碎门路模块
const path = require("path");
// 操作写入文件流
const handleStream = (item, writeStream) => {
// 读取对应目录文件 buffer
const readFile = fs.readFileSync(item);
// 将读取的 buffer || chunk 写入到 stream 中
writeStream.write(readFile);
// 写入完后，革除暂存的切片文件
fs.unlink(item, () => {});
};
// 视频上传(切片)
module.exports.video = (req, res) => {
// 创立解析对象
const form = new formidable.IncomingForm();
// 设置视频文件上传门路
let dirPath = path.join(__dirname, "video");
form.uploadDir = dirPath;
// 是否保留上传文件名后缀
form.keepExtensions = true;
// err 谬误对象 如果解析失败蕴含错误信息
// fields 蕴含除了二进制以外的 formData 的 key-value 对象
// file 对象类型 上传文件的信息
form.parse(req, async (err, fields, file) => {
// 获取上传文件 blob 对象
let files = file.file;
// 获取以后切片 index
let index = fields.index;
// 获取总切片数
let total = fields.total;
// 获取文件名
let filename = fields.filename;
// 重写上传文件名，设置暂存目录
let url =
dirPath +
"/" +
filename.split(".")[0] +
`_${index}.` +
filename.split(".")[1];
try {
// 同步批改上传文件名
fs.renameSync(files.path, url);
console.log(url);
// 异步解决
setTimeout(() => {
// 判断是否是最初一个切片上传实现，拼接写入全副视频
if (index === total) {
// 同步创立新目录，用以寄存残缺视频
let newDir = __dirname + `/uploadFiles/${Date.now()}`;
// 创立目录
fs.mkdirSync(newDir);
// 创立可写流，用以写入文件
let writeStream = fs.createWriteStream(newDir + `/${filename}`);
let fsList = [];
// 取出所有切片文件，放入数组
for (let i = 0; i < total; i++) {
const fsUrl =
dirPath +
"/" +
filename.split(".")[0] +
`_${i + 1}.` +
filename.split(".")[1];
fsList.push(fsUrl);
}
// 循环切片文件数组，进行 stream 流的写入
for (let item of fsList) {handleStream(item, writeStream);
}
// 全副写入，敞开 stream 写入流
writeStream.end();}
}, 100);
} catch (e) {console.log(e);
}
res.send({
code: 0,
msg: "上传胜利",
size: index,
});
});
};
// 获取文件切片数
module.exports.getSize = (req, res) => {
let count = 0;
req.setEncoding("utf8");
req.on("data", function (data) {let name = JSON.parse(data);
let dirPath = path.join(__dirname, "video");
// 计算已上传的切片文件个数
let files = fs.readdirSync(dirPath);
files.forEach((item, index) => {
let url =
name.fileName.split(".")[0] +
`_${index + 1}.` +
name.fileName.split(".")[1];
if (files.includes(url)) {++count;}
});
res.send({
code: 0,
msg: "请持续上传",
count,
});
});
};
逻辑剖析
-
前端
-
首先申请上传查问文件是否第一次上传，或已存在对应的切片
- 文件第一次上传，则切片从 0 开始
- 文件已存在对应的切片，则从切片数开始申请上传
-
循环切片数组，对每块切片文件进行上传
- 其中应用了模仿手动暂停申请，当切片数大于 90 勾销申请
-
-
服务端
-
接管查问文件 filename，查找长期存储的文件地址，判断是否存在对应上传文件
- 从未上传过此文件，则返回 0，切片数从 0 开始
- 已上传过文件，则返回对应切片数
-
接管上传文件切片，文件存入长期存储目录
- 通过 count 和total判断切片是否上传完毕
- 上传完毕，创立文件保留目录，并创立可写流，进行写入操作
- 提取对应临时文件放入数组，循环文件目录数组，顺次读取并写入文件 buffer
- 写入结束，敞开可写流。
-
小结
以上代码波及到具体的业务流程会有所更改或偏差，这只是其中一种具体实现的形式。
心愿这篇文章能对大家有所帮忙，如果有写的不对的中央也心愿指导一二。
正文完