Nodejs大文件分片上传、断点续传(HTTP/WebSocket)

最新推荐文章于 2024-06-06 14:00:31 发布
最新推荐文章于 2024-06-06 14:00:31 发布
阅读量3.3k 收藏 21
点赞数 4
文章标签： node.js vue javascript stream
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_36136424/article/details/107722188
版权
本文介绍了使用Node.js实现大文件分片上传和断点续传的技术，通过分析流程图和具体开发流程，详细讲解了如何利用Blob、FileReader、fs和stream等工具进行文件处理。项目亮点包括HTTP/WebSocket协议选择、断点续传支持和友好的用户交互。测试部分展示了HTTP上传4M图片和WebSocket上传1G电影的案例。
摘要由CSDN通过智能技术生成

在这里插入图片描述

前言

文件上传的场景经常碰到，如果我们上传的文件是一个很大的文件，那么上传的时间应该会比较久，再加上网络不稳定各种因素的影响，很容易导致传输中断，用户除了重新上传文件外没有其他的办法，但是我们可以使用分片上传来解决这个问题。通过分片上传技术，如果网络传输中断，我们重新选择文件只需要传剩余的分片。而不需要重传整个文件，大大减少了重传的开销。

项目

分析流程图

在这里插入图片描述

  • 流程简述
  1. 选择或拖拽文件，选择适当的分片大小
  2. 生成哈希加密散列
  3. 哈希校验（未上传，断点续传，已上传）
  4. 选择对应请求协议并发上传
  5. 文件分片上传完成，服务器合并分片
项目地址

https://github.com/xbc30/large-file-upload

详细目录介绍
├─client                       # vue client根目录
│  ├─src                       # 组件根目录
│    ├─assets                  # 静态文件svg
│    ├─components              # 组件目录
│      ├─upload.vue            # 上传组件
│    ├─App.vue                 # 根组件
├─server                       # eggjs server根目录
│  ├─app                       # 请求处理目录
│    ├─controller              # controller目录
│      ├─home.js               # 请求处理controller
│    ├─io                      # io目录
│      ├─controller            # io/controller目录
│        ├─nsp.js              # io请求处理controller
│    ├─router.js               # 路由
│    ├─utils.js                # 工具类函数
│  ├─config                    # 配置
│  ├─uploads                   # 上传文件目录
│    ├─e4e4-2097152            # 上传文件对应哈希目录
|    |—build.jpg               # 最终合并文件
├─README.md                    # README
亮点
  • HTTP/WebSocket协议可供选择
  • 选择或拖拽文件，并显示文件具体信息
  • 进度条显示实时进度，友好的操作提示信息
  • 根据文件大小自动匹配合适的分片大小，也可自定义分片大小
  • 支持断点续传
  • 少于等于10个分片请求就执行并行上传，大于10个分片请求就执行顺序同步上传
  • 管道流合并分片减轻服务器压力

基本知识点

浏览器对象
Blob

将读取的文件进行分片切割，以拼凑准备上传的数据对象

const blobSlice =
  File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice;

blobSlice.call(file, start, end) // 赋值到FormData示例的file属性
FileReader

使用FileReader.readAsArrayBuffer()读取分片内容，以计算文件哈希

fileReader.readAsArrayBuffer(blobSlice.call(file, start, end));
// readAsArrayBuffer() 方法用于启动读取指定的 Blob 或 File 内容
NodeJS模块
fs

fs负责读取文件路径，检索文件数量，创建可读流，可写流

stream

管道流的stream使用少量内存处理多个文件分片的合并

  • highWaterMark
    默认是16kb，调整为每个分片大小的值，使得合并过程中数据不会丢失或损坏，充当缓存池

  • pipe
    数据流中的积压问题

const input = fs.createReadStream(path, {
   
    highWaterMark: chunkSize
});
input.pipe(output);

具体开发流程

哈希生成与校验

Blob负责将文件按分片大小切分，FileReader会按字节读取文件内容，并转换为ArrayBuffer对象(二进制缓冲区)，SparkMD5负责计算文件最终哈希

// 计算文件哈希
calFileHash(file) {
   
    return new Promise((resolve, reject) => {
   
        const chunks = Math.ceil(file.size / this.chunkSize);

        const spark = new SparkMD5.ArrayBuffer();
        const fileReader = new FileReader();
        const that = this;
        let currentChunk = 0;

        fileReader.onload = function (e) {
   
            console.log("read chunk nr", currentChunk + 1, "of", chunks);
            spark.append(e.target.result); // Append array buffer
            currentChunk++;

            if (currentChunk < chunks) {
   
                loadNext();
            } else {
   
                that.chunkTotal = currentChunk;
                const hash = spark.end();
                that.updateTips("success", "加载文件成功，文件哈希为" + hash);
                resolve(hash);
            }
        };

        fileReader.onerror
最低0.47元/天 解锁文章
cobra5515
关注
  • 4
    点赞
  • 踩
  • 21
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
php和Nodejs大文件分片上传
04-09
jquery大文件分片上传插件，其中包含php和Nodejs示例代码
Vue3 + nodejs 实战 - 文件上传项目 （图片上传，多文件上传，拖拽上传，大文件分片上传，断点续传）后端源码
10-19
这个就是Vue3 + nodejs 实战 --- 文件上传项目的前端源码（Vue3）+ 后端（Nodejs），实现的文件上传的代码，主要实现了（图片上传，多文件上传，拖拽上传，大文件分片上传，断点续传）这些功能，如果对文件上传有...
Node.js实现分片上传
IICOOM的博客
07-27 1264
大文件上传会消耗大量的时间，而且中途有可能上传失败。这时我们需要前端和后端配合来解决这个问题。
js实现分片上传文件
最新发布
weixin_45525177的博客
06-06 646
js实现分片上传文件，js实现分块上传文件，js实现切片上传文件，js实现分片上传文件解决方案，js实现分片上传文件思路，js实现分片上传文件实现方法，js实现分片上传文件源码，js实现分片上传文件实例，js实现加密上传文件，js实现上传文件夹，参考迅雷，你会发现，每次下载中的时候，都会有两个文件，一个文件主体，另外一个就是文件临时文件，临时文件存储着每个分块对应字节位的状态。接口地址分别对应：文件初始化，文件数据上传，文件进度，文件上传完毕，文件删除，文件夹初始化，文件夹删除，文件列表。
node.js分片上传文件
05-22 167
前端 ： <html> <head> <title>分片上传文件</title> </head> <body> <div class="hei-bg" style="display:block;"> <div class="user-info...
用websocket实现文件传输 nodejs
boringsummers的博客
03-17 4767
  学校的大作业，要用套接字写一个有文件传输功能的系统，js用的最多，于是首先想到了用nodejs来实现，所以用html5的websocket来写了一个最小实现网盘 有基本的上传 新建 下载文件的功能。 实现思路   里面的所有操作都是在websocket连接上的，比如文件列表是nodesj先遍历当前文件夹，返回包含了文件属性的json格式，前端根据这个文件对象列表进行渲染。   然后每个显示文件...
js + node 分片上传
dkj4989的博客
09-16 180
首先是HTML5的几个规范 File FileReader ArrayBuffer Blob input上传的文件就是File类型文件，而File是基于Blob设计的。 接口自带slice方法，可以分割文件，达到分片上传的目的。 FileReader可以读取Blob里面的内容。 //将字符串转换成 Blob对象 var blob = new Blob(['中...
Electron中实现大文件上传和断点续传功能
01-19
Electron官网的描述：Electron是由Github开发，用HTML，CSS和JavaScript来构建跨平台桌面应用程序的一个开源库。 Electron通过将Chromium和Node.js合并到同一个运行时环境中，并将其打包为Mac，Windows和Linux系统下...
前端使用 node fs模块实现文件断点续传 (下载续传)
08-28
前端直接引用nodejs fs 模块 实现文件下载续传、并没有想象中的那么难...
Vue3 + nodejs 实战 - 文件上传项目 （图片上传，多文件上传，拖拽上传，大文件分片上传，断点续传）前端源码
10-19
这个就是Vue3 + nodejs 实战 --- 文件上传项目的前端源码（Vue3）+ 后端（Nodejs），实现的文件上传的代码，主要实现了（图片上传，多文件上传，拖拽上传，大文件分片上传，断点续传）这些功能，如果对文件上传有...
使用js+node实现分片上传功能
hkgukg的博客
02-03 262
特别注意：使用uploadFun方法返回的数组去上传时，要使用同步调用，就是第一个分片文件上传完成之后，再上传下一个。在上述代码中，调用uploadFun方法会返回一个数组，数组的每一个元素就是对应的分片文件。
node+socket 实现文件批量上传+断点续传+特效进度nodesocketupload.rar
08-09
nodejs+socket 文件批量上传+断点续传+特效进度+上传进度条。服务端MD5验证文件完整性。，欢迎需要的来下载使用，正版手册，适合新手学习，仅供学习使用
nodejs超大文件上传
06-25
基于nodejs的超大文件上传服务器源码,及测试用的html页,ffmpeg转码器,由于本人作传输视频使用,在用户提交视频到本程序时,本程序将会对视频生成MD5片段,并进行异步拼合,完成上传后,本程序自动调用ffmpeg进行视频转码,将客户上传的任意格式视频均转为基于 x264+aac的mp4文件,app.js文件中有写好的结构体供自定义配置存储路径及运行端口.
【Node.js】大文件上传（分片上传）
小秀的博客
03-30 1823
大文件上传通常采用分片上传。如果因为某些原因上传突然中断，解决问题之后可以接着之前的分片上传，而不需要从头开始上传，也就是断点续传。此外还可以利用多个网络连接并行上传多个分片，提高上传速度。注：前端不能使用 live-server 去启动， live-server 启动会在上传文件时自动刷新页面，阻止默认事件。所以使用去启动这里用了 9999 端口。
基于node的文件分片上传
程序员石磊
07-04 297
放弃问题就没收获！
Node+H5实现大文件分片上传(有源码)
weixin_33985679的博客
03-31 890
话前 上传大文件上传的教程网上很多, 但是大部分没给出一个比较完整的出来, 这个博客给出的是前后端一套完整的解决方案, 其中前端没有使用第三方上传库, 希望能帮到有同样需求的朋友们. 大文件分片上传的好处在这里就不用多说了, 之前不管是上传单文件还是分片文件上传都是依靠Flash来实现, 现在H5能原生支持, 而且性能要比Flash高很多...
nodejs文件服务器断点续传,前端大文件上传中的：分片上传、断点续传、秒传
weixin_32401075的博客
08-12 815
方案前端：vue、element-ui服务端：nodejs分片上传将大文件切片成多个小文件块，然后同时上传思路前端前端通过的文件选择器，获取用户选择的文件handleFileChange(e) {const [file] = e.target.files;// ...}设定分片大小，将文件切片成多个文件块const SIZE = 10 * 1024 * 1024; // 切片大小// 生成文件切片...
实现分片上传、断点续传、秒传 （JS+NodeJS）（TypeScript）
m0_64130892的博客
10-28 2556
上传文件是一个很常见的操作，但是当文件很大时，上传花费的时间会非常长，上传的操作就会具有不确定性，如果不小心连接断开，那么文件就需要重新上传，导致浪费时间和网络资源。 所以，当涉及到大文件上传时，分片上传和断点续传就显得很有必要。把文件分成多个分片，一片片上传，最终服务端再进行合并操作。 主要思路：计算唯一标识 --> 若上传过，则秒传 --> 分片 --> 若上传过部分，则断点续传 --> 正常分片上传 --> 完整性校验 --> 合并请求
nodejs实现Websocket的数据接收发送
dfpbut5000的博客
05-19 1160
　　在去年的时候，写过一篇关于websocket的博文：http://www.cnblogs.com/axes/p/3586132.html，里面主要是借助了nodejs-websocket这个插件，后来还用了socket.io做了些demo，但是，这些都是借助于别人封装好的插件做出来的，websocket到底是怎么实现的呢自己之前真没怎么去想过，最近在看朴灵大神的《深入浅出nodej...
使用nodejs写一个大文件切片断点续传的功能上传
05-13
好的，以下是一个使用 Node.js 实现大文件切片上传和断点续传的功能示例： ```javascript const http = require('http'); const fs = require('fs'); const path = require('path'); const PORT = 8000; const UPLOAD_DIR = path.resolve(__dirname, './uploads'); // 创建上传目录 if (!fs.existsSync(UPLOAD_DIR)) { fs.mkdirSync(UPLOAD_DIR); } // 上传文件处理函数 const handleUpload = (req, res) => { const { filename, chunkIndex, totalChunks } = req.headers; const chunkDir = path.resolve(UPLOAD_DIR, filename); // 如果是第一个分片，创建文件夹 if (chunkIndex === '0') { fs.mkdirSync(chunkDir); } // 获取上传的分片数据 const chunksData = []; req.on('data', (chunk) => { chunksData.push(chunk); }); req.on('end', () => { const buffer = Buffer.concat(chunksData); // 写入分片文件 fs.writeFileSync(path.resolve(chunkDir, chunkIndex), buffer); // 如果当前分片是最后一个分片，则合并文件 if (Number(chunkIndex) === Number(totalChunks) - 1) { const filePath = path.resolve(UPLOAD_DIR, filename); const chunks = fs.readdirSync(chunkDir); const writeStream = fs.createWriteStream(filePath); chunks.forEach((chunk) => { const chunkPath = path.resolve(chunkDir, chunk); const chunkBuffer = fs.readFileSync(chunkPath); fs.unlinkSync(chunkPath); // 删除分片文件 writeStream.write(chunkBuffer); }); writeStream.end(() => { res.end('upload success'); }); } else { res.end('chunk upload success'); } }); }; // 断点续传处理函数 const handleResumeUpload = (req, res) => { const { filename } = req.headers; const filePath = path.resolve(UPLOAD_DIR, filename); const fileStat = fs.statSync(filePath); res.setHeader('Content-Length', fileStat.size); res.setHeader('Content-Type', 'application/octet-stream'); res.setHeader('Accept-Ranges', 'bytes'); const range = req.headers.range || 'bytes=0-'; const positions = range.replace(/bytes=/, '').split('-'); const start = parseInt(positions[0], 10); const end = positions[1] ? parseInt(positions[1], 10) : fileStat.size - 1; const chunkSize = end - start + 1; res.setHeader('Content-Range', `bytes ${start}-${end}/${fileStat.size}`); res.setHeader('Cache-Control', 'no-cache'); const readStream = fs.createReadStream(filePath, { start, end }); readStream.on('open', () => { readStream.pipe(res); }); readStream.on('error', () => { res.end('Error'); }); }; // 创建 HTTP 服务器 const server = http.createServer((req, res) => { if (req.url === '/upload' && req.method === 'POST') { handleUpload(req, res); } else if (req.url === '/resume-upload' && req.method === 'GET') { handleResumeUpload(req, res); } else { res.end('Hello World!'); } }); // 启动服务器 server.listen(PORT, () => { console.log(`Server is listening on port ${PORT}`); }); ``` 使用示例： 1. 开启服务器：`node server.js` 2. 上传文件：使用 POST 请求发送文件分片（每个分片的大小可以自定义），请求头需要包含 `filename`（文件名）、`chunkIndex`（当前分片索引，从 0 开始）、`totalChunks`（总分片数）三个字段。 3. 断点续传：使用 GET 请求获取已上传的文件，请求头需要包含 `filename`（文件名）字段和 `range`（请求的字节范围）字段。如果请求头中没有 `range` 字段，则返回整个文件的内容。如果请求头中有 `range` 字段，则只返回指定字节范围内的文件内容。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值