Node.js实现断点续传
更新时间:2021年6月23日 15:00 点击:1767
方案分析
切片
- 就是对上传视频进行切分,具体操作为:
- 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取消请求
- 其中使用了模拟手动暂停请求,当切片数大于90取消请求
服务端
- 接收查询文件filename,查找临时存储的文件地址,判断是否存在对应上传文件
- 从未上传过此文件,则返回0,切片数从0开始
- 已上传过文件,则返回对应切片数
- 接收上传文件切片,文件存入临时存储目录
- 通过count和total判断切片是否上传完毕
- 上传完毕,创建文件保存目录,并创建可写流,进行写入操作
- 提取对应临时文件放入数组,循环文件目录数组,依次读取并写入文件buffer
- 写入完毕,关闭可写流。
小结
以上代码涉及到具体的业务流程会有所更改或偏差,这只是其中一种具体实现的方式。
希望这篇文章能对大家有所帮助,如果有写的不对的地方也希望指点一二。
以上代码地址:github.com/Surprise-li…
以上就是Node.js实现断点续传的详细内容,更多关于Node.js 断点续传的资料请关注猪先飞其它相关文章!
相关文章
- 这次文章要给大家介绍的是node.JS md5加密中文与php结果不一致怎么办,不知道具体解决办法的下面跟小编一起来看看。 因项目需要,需要Node.js与PHP做接口调用,发现nod...2017-07-06
- 使用require('crypto')调用加密模块。加密模块需要底层系统提供OpenSSL的支持。它提供了一种安全凭证的封装方式,可以用于HTTPS安全网络以及普通HTTP连接。该模块还提供了一套针对OpenSSL的hash(哈希),hmac(密钥哈希),cipher...2014-06-07
- 1.什么是异步编程? 异步编程是指由于异步I/O等因素,无法同步获得执行结果时, 在回调函数中进行下一步操作的代码编写风格,常见的如setTimeout函数、ajax请求等等。示例: for (var i = 1; i <= 3; i++) {setTimeout(functi...2015-10-23
- 本文介绍基于nodejs+express+art-template的留言板功能。包含列表界面、添加界面和发送留言功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-21
安装使用Mongoose配合Node.js操作MongoDB的基础教程
这篇文章主要介绍了安装使用Mongoose来让Node.js操作MongoDB的基础教程,前端js+后端node+js操作MongoDB正是所谓最流行的一种JavaScript全栈开发方案,需要的朋友可以参考下...2016-03-03- 这篇文章主要为大家详细介绍了node.js从数据库获取数据的具体代码,nodejs可以获取具体某张数据表信息,感兴趣的朋友可以参考一下...2016-05-09
- 这篇文章介绍的是一个小技巧来获取node.js项目根目录,这个技巧非常实用。有需要的朋友们可以参考借鉴,下面来一起看看吧。...2016-10-02
- post请求:复制代码 代码如下: request.post('/api/pet') .end(function(resp,err){ if (resp.body.status===200) { alert('yay got ' + JSON.stringify(res.body)); } else { return nex...2015-03-15
- 这篇文章主要介绍了node.js和Deno的区别,对deno感兴趣的同学,可以参考下...2021-04-27
- 这篇文章主要介绍了node.js如何操作MySQL数据库,帮助大家更好的进行web开发,感兴趣的朋友可以了解下...2020-10-29
- 这篇文章主要为大家详细介绍了三种Node.js写文件的方式,感兴趣的小伙伴们可以参考一下...2016-03-10
- 这篇文章主要介绍了Node.js之http模块的用法,对Node.js感兴趣的同学,可以参考下...2021-04-25
- 这篇文章主要介绍了node.js 全局变量的具体使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-15
- 本篇文章主要介绍了node.js爬虫爬取拉勾网职位信息的方法。具有很好的参考价值。下面跟着小编一起来看下吧 用node.js写了一个简单的小爬虫,用来爬取拉勾网上的招...2017-07-06
- 这两天为了这个问题, Gitter 上问, Twitter 上问, GitHub 上问, 两天没反应 原来写博客的 jlongster 不理我, 我也不知道 Webpack 作者的联系方式 最后在 Gitter 上发的消息他似乎看到了, 就粗略地解释了一遍, 醍醐灌...2015-10-23
- 这篇文章主要介绍了vue+element+oss实现前端分片上传和断点续传,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-30
通过node-mysql搭建Windows+Node.js+MySQL环境的教程
这篇文章主要介绍了通过node-mysql搭建Windows+Node.js+MySQL环境的教程,node-mysql是JavaScript编写的一个Node的MySQL驱动,需要的朋友可以参考下...2016-03-03Linux下为Node.js程序配置MySQL或Oracle数据库的方法
这篇文章主要介绍了Linux下为Node.js程序配置MySQL或Oracle数据库的方法,这里默认已经装配好了Node环境然后我们利用npm包管理工具来进行配置,需要的朋友可以参考下...2016-03-22- Stream 是一个抽象接口,Node 中有很多对象实现了这个接口。例如,对http 服务器发起请求的request 对象就是一个 Stream,还有stdout(标准输出)。...2016-09-01
- 本文给大家分享的是如何在Node.js中使用jQuery的方法,包含步骤以及出错的处理,非常的详细,有需要的小伙伴可以参考下...2016-09-01