Node.js实现断点续传


Posted in Javascript onJune 23, 2021
目录
  • 方案分析
    • 切片
    • 断点续传
  • 具体解决流程
  • 逻辑分析
    • 前端
    • 服务端
  • 小结

 

方案分析

 

切片

  • 就是对上传视频进行切分,具体操作为:
  • 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 断点续传的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
img标签中onerror用法
Aug 13 Javascript
JavaScript自定义DateDiff函数(兼容所有浏览器)
Mar 01 Javascript
jquery实现的可隐藏重现的靠边悬浮层实例代码
May 27 Javascript
js图片轮播效果实现代码
Apr 18 Javascript
Laravel中常见的错误与解决方法小结
Aug 30 Javascript
前端实现文件的断点续传(前端文件提交+后端PHP文件接收)
Nov 04 Javascript
浅谈vux之x-input使用以及源码解读
Nov 04 Javascript
微信小程序生成分享海报方法(附带二维码生成)
Mar 29 Javascript
Javascript读取上传文件内容/类型/字节数
Apr 30 Javascript
在vue中利用全局路由钩子给url统一添加公共参数的例子
Nov 01 Javascript
WEB前端性能优化的7大手段详解
Feb 04 Javascript
原生js实现瀑布流效果
Mar 09 Javascript
JavaScript实现登录窗体
Vue + iView实现Excel上传功能的完整代码
基于JavaScript实现年月日三级联动
Vue vee-validate插件的简单使用
Jun 22 #Vue.js
基于JavaScript实现省市联动效果
JavaScript实现简单计时器
React实现动效弹窗组件
You might like
无数据库的详细域名查询程序PHP版(5)
2006/10/09 PHP
php 破解防盗链图片函数
2008/12/09 PHP
php下foreach提示Warning:Invalid argument supplied for foreach()的解决方法
2014/11/11 PHP
php给一组指定关键词添加span标签的方法
2015/03/31 PHP
举例讲解PHP面对对象编程的多态
2015/08/12 PHP
计算世界完全对称日的js代码,粗糙版
2011/11/04 Javascript
jquery仿QQ商城带左右按钮控制焦点图片切换滚动效果
2013/06/27 Javascript
js监听鼠标事件控制textarea输入字符串的个数
2014/09/29 Javascript
JavaScript定义变量和变量优先级问题探讨
2014/10/11 Javascript
jquery利用命名空间移除绑定事件的方法
2015/03/11 Javascript
jquery ui resize 中border-box的bug修正
2015/04/26 Javascript
jQuery实现的手机发送验证码倒计时效果代码分享
2015/08/24 Javascript
javascript日期验证之输入日期大于等于当前日期
2015/12/13 Javascript
JavaScript中各种引用类型的常用操作方法小结
2016/05/05 Javascript
JavaScript实现多栏目切换效果
2016/12/12 Javascript
Three.js的使用及绘制基础3D图形详解
2017/04/27 Javascript
canvas简单快速的实现知乎登录页背景效果
2017/05/08 Javascript
Vue中的字符串模板的使用
2018/05/17 Javascript
浅谈layer的Icon样式以及一些常用的layer窗口使用方法
2019/09/11 Javascript
Python封装原理与实现方法详解
2018/08/28 Python
Django forms组件的使用教程
2018/10/08 Python
使用Python实现企业微信的自动打卡功能
2019/04/30 Python
django 中QuerySet特性功能详解
2019/07/25 Python
Python属性和内建属性实例解析
2020/01/14 Python
python中sklearn的pipeline模块实例详解
2020/05/21 Python
Python smtp邮件发送模块用法教程
2020/06/15 Python
浅谈HTML5 FileReader分布读取文件以及其方法简介
2017/11/09 HTML / CSS
HTML5给汉字加拼音收起展开组件的实现代码
2020/04/08 HTML / CSS
八一建军节营销活动方案
2014/08/31 职场文书
爱祖国爱家乡演讲稿
2014/09/02 职场文书
2014入党积极分子批评与自我批评思想报告
2014/10/06 职场文书
2015年消防工作总结
2015/04/24 职场文书
在职证明书模板
2015/06/15 职场文书
温馨祝福晨语:美丽的一天从我的问候开始
2019/11/28 职场文书
Python 数据可视化之Seaborn详解
2021/11/02 Python
vue实现移动端div拖动效果
2022/03/03 Vue.js