Node.js实现断点续传

目录

  • 方案分析
    • 切片
    • 断点续传
  • 具体解决流程
    • 逻辑分析
      • 前端
      • 服务端
    • 小结

      方案分析

      切片

      • 就是对上传视频进行切分,具体操作为:
      • File.slice(start,end):返回新的blob对象
        • 拷贝blob的起始字节
        • 拷贝blob的结束字节
      【Node.js实现断点续传】
      断点续传

      • 每次切片上传之前,请求服务器接口,读取相同文件的已上传切片数
      • 上传的是新文件,服务端则返回0,否则返回已上传切片数

      具体解决流程
      该demo提供关键点思路及方法,其他功能如:文件限制,lastModifiedDate校验文件重复性,缓存文件定期清除等功能扩展都可以在此代码基础上添加。
      html

      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 = https://www.it610.com/article/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构建服务器apiconst 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
        • 写入完毕,关闭可写流。

      小结
      以上代码涉及到具体的业务流程会有所更改或偏差,这只是其中一种具体实现的方式。
      希望这篇文章能对大家有所帮助,如果有写的不对的地方也希望指点一二。
      以上代码地址:github.com/Surprise-li…
      以上就是Node.js实现断点续传的详细内容,更多关于Node.js 断点续传的资料请关注脚本之家其它相关文章!

        推荐阅读