使用Node.js怎么实现断点续传

2023-06-15 05:06:54 433人浏览薄情痞子

摘要

本篇文章为大家展示了使用node.js怎么实现断点续传，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。方案分析切片拷贝blob的起始字节拷贝blob的结束字节就是对上传视频进行切分，具体操作为：Fil

本篇文章为大家展示了使用node.js怎么实现断点续传，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

方案分析

切片

拷贝blob的起始字节
拷贝blob的结束字节
就是对上传视频进行切分，具体操作为：
File.slice(start,end)：返回新的blob对象

断点续传

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

【推荐学习：《nodejs 教程》】

具体解决流程

该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("h3");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构建服务器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) => {  // 读取对应目录文件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,    });  });};