您的位置:首页 > 编程学习 > > 正文

nodejs子进程调试(Node.js实现断点续传)

更多 时间:2021-10-23 10:41:20 类别:编程学习 浏览量:1304

nodejs子进程调试

Node.js实现断点续传

方案分析

切片

  • 就是对上传视频进行切分,具体操作为:
  • 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) => {
      // 读取对应目录文件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
      • 写入完毕,关闭可写流。

    小结

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

    以上代码地址:github.com/Surprise-li…

    以上就是Node.js实现断点续传的详细内容,更多关于Node.js 断点续传的资料请关注开心学习网其它相关文章!

    您可能感兴趣