Node.js实现大文件断点续传—浅析

Node.js简介：

当谈论Node.js时，通常指的是一个基于Chrome V8 JavaScript引擎构建的开源、跨平台的JavaScript运行时环境。以下是一些Node.js的内容：

1. 事件驱动编程：Node.js采用了事件驱动的编程范式，这意味着它可以异步地执行I/O操作，而无需阻塞进程或线程。这种方法可以提高应用程序的性能和响应性。

2. 模块化：Node.js支持模块化编程，因此开发人员可以将代码分解为可重用的模块。Node.js中的每个文件都被视为一个模块，可以使用require()函数将其导入到其他文件中。

3. NPM：Node.js拥有一个名为NPM（Node Package Manager）的包管理器，它允许开发人员轻松地查找、安装和管理他们的依赖项。

4. HTTP模块：Node.js包含一个内置的HTTP模块，使开发人员能够轻松地创建Web服务器和客户端。

5. 文件系统模块：Node.js还包括一个内置的文件系统模块，允许开发人员访问和操作文件系统。

6. 单线程：虽然Node.js是单线程的，但它可以通过异步编程技术来避免阻塞。这意味着在单个线程中，可以同时处理多个请求，从而提高应用程序的性能。

7. 跨平台：由于Node.js是基于JavaScript编写的，因此可以在Windows、Linux、Mac OS等多个平台上运行。

这只是Node.js的一小部分内容，但它们提供了Node.js如此流行的一些关键功能和特点。

前言

平常业务需求：上传图片、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);});
};

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) => {// 读取对应目录文件bufferconst 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;// 获取当前切片indexlet 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
    • 写入完毕，关闭可写流。

小结

以上代码涉及到具体的业务流程会有所更改或偏差，这只是其中一种具体实现的方式。
希望这篇文章能对大家有所帮助，如果有写的不对的地方也希望指点一二。