Node.js实现分片上传断点续传示例详解
目录
- 正文
- 文件的分片与合并
- 并发控制
- 使代码可复用
- 服务端接口实现
正文
大文件上传会消耗大量的时间，而且中途有可能上传失败。这时我们需要前端和后端配合来解决这个问题。
解决步骤：
- 文件分片，减少每次请求消耗的时间，如果某次请求失败可以单独上传，而不是从头开始
- 通知服务端合并文件分片
- 控制并发的请求数量，避免浏览器内存溢出
- 当因为网络或者其他原因导致某次的请求失败，我们重新发送请求
文件的分片与合并
在JavaScript中，FIle对象是' Blob '对象的子类，该对象包含一个重要的方法slice，通过该方法我们可以这样分割二进制文件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.24.0/axios.min.js"></script>
</head>
<body>
<input type="file" multiple="multiple" id="fileInput" />
<button onclick="SliceUpload()">上传</button>
<script>
function SliceUpload() {
const file = document.getElementById('fileInput').files[0]
if (!file) return
// 文件分片
let size = 1024 * 50; //50KB 50KB Section size
let fileChunks = [];
let index = 0; //Section num
for (let cur = 0; cur < file.size; cur += size) {
fileChunks.push({
hash: index++,
chunk: file.slice(cur, cur + size),
});
}
// 上传分片
const uploadList = fileChunks.map((item, index) => {
let formData = new FormData();
formData.append("filename", file.name);
formData.append("hash", item.hash);
formData.append("chunk", item.chunk);
return axios({
method: "post",
url: "/upload",
data: formData,
});
});
await Promise.all(uploadList);
// 所有分片上传完成，通知服务器合并分片
await axios({
method: "get",
url: "/merge",
params: {
filename: file.name,
},
});
console.log("Upload to complete");
}
</script>
</body>
</html>
并发控制
如果文件很大，这样切分的分片会很多，浏览器短时间内就会发起大量的请求，可能会导致内存耗尽，所以要进行并发控制。
这里我们结合Promise.race()方法 控制并发请求的数量，避免浏览器内存溢出。
// 加入并发控制
async function SliceUpload() {
const file = document.getElementById('fileInput').files[0]
if (!file) return
// 文件分片
let size = 1024 * 50; //50KB 50KB Section size
let fileChunks = [];
let index = 0; //Section num
for (let cur = 0; cur < file.size; cur += size) {
fileChunks.push({
hash: index++,
chunk: file.slice(cur, cur + size),
});
}
let pool = []; //Concurrent pool
let max = 3; //Maximum concurrency
for (let i = 0; i < fileChunks.length; i++) {
let item = fileChunks[i];
let formData = new FormData();
formData.append("filename", file.name);
formData.append("hash", item.hash);
formData.append("chunk", item.chunk);
// 上传分片
let task = axios({
method: "post",
url: "/upload",
data: formData,
});
task.then(() => {
// 从并发池中移除已经完成的请求
let index = pool.findIndex((t) => t === task);
pool.splice(index);
});
// 把请求放入并发池中，如果已经达到最大并发量
pool.push(task);
if (pool.length === max) {
//All requests are requested complete
await Promise.race(pool);
}
}
// 所有分片上传完成，通知服务器合并分片
await axios({
method: "get",
url: "/merge",
params: {
filename: file.name,
},
});
console.log("Upload to complete");
}
使代码可复用
function SliceUpload() {
const file = document.getElementById('fileInput').files[0]
if (!file) return
// 文件分片
let size = 1024 * 50; // 分片大小设置
let fileChunks = [];
let index = 0; // 分片序号
for (let cur = 0; cur < file.size; cur += size) {
fileChunks.push({
hash: index++,
chunk: file.slice(cur, cur + size),
});
}
const uploadFileChunks = async function(list){
if(list.length === 0){
// 所有分片上传完成，通知如无
await axios({
method: 'get',
url: '/merge',
params: {
filename: file.name
}
});
console.log('Upload to complete')
return
}
let pool = [] // 并发池
let max = 3 // 最大并发数
let finish = 0 // 完成数量
let failList = [] // 失败列表
for(let i=0;i<list.length;i++){
let item = list[i]
let formData = new FormData()
formData.append('filename', file.name)
formData.append('hash', item.hash)
formData.append('chunk', item.chunk)
let task = axios({
method: 'post',
url: '/upload',
data: formData
})
task.then((data)=>{
// 从并发池中移除已经完成的请求
let index = pool.findIndex(t=> t===task)
pool.splice(index)
}).catch(()=>{
failList.push(item)
}).finally(()=>{
finish++
// 如果有失败的重新上传
if(finish===list.length){
uploadFileChunks(failList)
}
})
pool.push(task)
if(pool.length === max){
await Promise.race(pool)
}
}
}
uploadFileChunks(fileChunks)
}
服务端接口实现
const express = require('express')
const multiparty = require('multiparty')
const fs = require('fs')
const path = require('path')
const { Buffer } = require('buffer')
// file path
const STATIC_FILES = path.join(__dirname, './static/files')
// Temporary path to upload files
const STATIC_TEMPORARY = path.join(__dirname, './static/temporary')
const server = express()
// Static file hosting
server.use(express.static(path.join(__dirname, './dist')))
// Interface for uploading slices
server.post('/upload', (req, res) => {
const form = new multiparty.Form();
form.parse(req, function(err, fields, files) {
let filename = fields.filename[0]
let hash = fields.hash[0]
let chunk = files.chunk[0]
let dir = `${STATIC_TEMPORARY}/${filename}`
// console.log(filename, hash, chunk)
try {
if (!fs.existsSync(dir)) fs.mkdirSync(dir)
以上就是Node.js实现分片上传示例详解的详细内容，更多关于Node.js分片上传的资料请关注我们其它相关文章！
相关推荐
-
node.js读写json文件的方法
本文实例为大家分享了node.js读写json文件的具体代码,供大家参考,具体内容如下 一.引入依赖包 const fs = require('fs') const path = require('path') const configFile = path.resolve(__dirname, './config.json') 二.读取文件 /** * 读取文件 * */ router.get('/get_config', async ctx => { try { const data = f
-
Node.js实现断点续传
目录 方案分析 切片 断点续传 具体解决流程 逻辑分析 前端 服务端 小结 方案分析 切片 就是对上传视频进行切分,具体操作为: File.slice(start,end):返回新的blob对象 拷贝blob的起始字节 拷贝blob的结束字节 断点续传 每次切片上传之前,请求服务器接口,读取相同文件的已上传切片数 上传的是新文件,服务端则返回0,否则返回已上传切片数 具体解决流程 该demo提供关键点思路及方法,其他功能如:文件限制,lastModifiedDate校验文件重复性,缓存文件定期清
-
基于Node.js的大文件分片上传示例
我们在做文件上传的时候,如果文件过大,可能会导致请求超时的情况.所以,在遇到需要对大文件进行上传的时候,就需要对文件进行分片上传的操作.同时如果文件过大,在网络不佳的情况下,如何做到断点续传?也是需要记录当前上传文件,然后在下一次进行上传请求的时候去做判断. 先上代码:代码仓库地址 前端 1. index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8
-
Node.js断点续传的实现
前言 平常业务需求:上传图片.Excel等,毕竟几M的大小可以很快就上传到服务器. 针对于上传视频等大文件几百M或者几G的大小,就需要等待比较长的时间. 这就产生了对应的解决方法,对于大文件上传时的暂停.断网.网络较差的情况下, 使用切片+断点续传就能够很好的应对上述的情况 方案分析 切片 就是对上传视频进行切分,具体操作为: File.slice(start,end):返回新的blob对象 拷贝blob的起始字节 拷贝blob的结束字节 断点续传 每次切片上传之前,请求服务器接口,读取相同文
-
node.js实现简单登录注册功能
本文实例为大家分享了node.js实现简单登录注册的具体代码,供大家参考,具体内容如下 1.首先需要一个sever模块用于引入路由,引入连接数据库的模块,监听服务器2.要有model层,里面写数据库连接模块和数据库的各种model(表),并导出model对象3.工具类utils,里面存放一些功能的模块,并且封装后导出 ,例如发送验证码的功能4.写路由,需要对数据库操作就使用导出的model对象,需要功能模块就使用导出的功能对象随后返回这个路由,在sever里引入5.生成api文档 sever模块
-
Node.js实现分片上传断点续传示例详解
目录 正文 文件的分片与合并 并发控制 使代码可复用 服务端接口实现 正文 大文件上传会消耗大量的时间,而且中途有可能上传失败.这时我们需要前端和后端配合来解决这个问题. 解决步骤: 文件分片,减少每次请求消耗的时间,如果某次请求失败可以单独上传,而不是从头开始 通知服务端合并文件分片 控制并发的请求数量,避免浏览器内存溢出 当因为网络或者其他原因导致某次的请求失败,我们重新发送请求 文件的分片与合并 在JavaScript中,FIle对象是' Blob '对象的子类,该对象包含一个重要的方法s
-
node.js中Util模块作用教程示例详解
目录 从类型判断说起 严格相等 Error First & Promise 调试与输出 从类型判断说起 在 JavaScript 中,进行变量的类型校验是一个非常令人头疼的事,如果只是简单的使用 typeof 会到各种各样的问题. 举几个简单的: console.log(typeof null) // 'object' console.log(typeof new Array) // 'object' console.log(typeof new String) // 'object' 后来,大
-
React+react-dropzone+node.js实现图片上传的示例代码
本文将会用typescript+react+react-dropzone+express.js实现前后端上传图片.当然是用typescript需要提前下载相应的模块,在这里就不依依介绍了. 第一步,配置tsconfig.js "compilerOptions": { "outDir": "./public/", "sourceMap": true, "noImplicitAny": true, "
-
Node.js实现文件上传的示例
文件上传指的是将用户本地的文件上传到服务器中. 上传文件需要处理两个位置: 客户端 客户端如何上传文件? 上传文件的表单项需要指定为input,type是file 要上传文件必须将表单enctype设置为multipart/form-data 这个参数表示表单将会以多部件表单的形式上传enctype="application/x-www-form-urlencoded"是默认值.这个值的意思指将会对表单项的内容进行url编码,所谓url编码就将请求参数转换为二进制编码. 1.multi
-
SpringBoot文件分片上传的示例代码
目录 背景 文件MD5计算 文件分片切割 文件分片接收 检查分片 保存分片 合并分片 云文件分片上传 阿里云OSS 华为云OBS Minio 背景 最近好几个项目在运行过程中客户都提出文件上传大小的限制能否设置的大一些,用户经常需要上传好几个G的资料文件,如图纸,视频等,并且需要在上传大文件过程中进行优化实时展现进度条,进行技术评估后针对框架文件上传进行扩展升级,扩展接口支持大文件分片上传处理,减少服务器瞬时的内存压力,同一个文件上传失败后可以从成功上传分片位置进行断点续传,文件上传成功后再次上
-
vue 大文件分片上传(断点续传、并发上传、秒传)
对于大文件的处理,无论是用户端还是服务端,如果一次性进行读取发送.接收都是不可取,很容易导致内存问题.所以对于大文件上传,采用切块分段上传,从上传的效率来看,利用多线程并发上传能够达到最大效率. 本文是基于 springboot + vue 实现的文件上传,本文主要介绍vue实现文件上传的步骤及代码实现,服务端(springboot)的实现步骤及实现请移步本人的另一篇文章: springboot 大文件上传.分片上传.断点续传.秒传 上传分步: 本人分析上传总共分为: MD5读取文件,获取文件的
-
Node.js实现文件上传
在工作中碰到了这样的需求,需要用nodejs 来上传文件,之前也只是知道怎么通过浏览器来上传文件, 用nodejs的话, 相当于模拟浏览器的行为. google 了一番之后, 明白了浏览器无非就是利用http协议来给服务器传输数据, 具体协议就是<RFC 1867 - Form-based File Upload in HTML>, 在浏览器上通过form 表单来上传文件就是通过这个协议,我们可以先看看浏览器给服务端发送了什么数据, 就可以依葫芦画瓢的把上传功能实现出来.说起form 表单上传
-
Node.js + express实现上传大文件的方法分析【图片、文本文件】
本文实例讲述了Node.js + express实现上传大文件的方法.分享给大家供大家参考,具体如下: 对于大文件的上传我们首先要引入一个叫做 multer 的库: npm install --save multer 关于这个库,大家可以查阅官方文档: 点击跳转 https://www.npmjs.com/package/multer 我们先将库引入我们的项目中: var multer = require('multer') var upload = multer({ dest: 'upload
-
又拍云 Node.js 实现文件上传、删除功能
Node.js 服务端 使用 Node.js + Express.js 实现 服务端 const express = require("express"); const app = express(); const axios = require('axios'); app.set('port', process.env.PORT || 8082); // 静态资源目录,这里放在了根目录,生产环境不允许这样 app.use(express.static(__dirname)); //
-
详解Node.js一行命令上传本地文件到服务器
现在存在的问题 每次打包完, 都要打开 FileZilla 一顿拖拽然后才能上传代码, 那就立马撸一个自动化脚本就完事了 publish-sftp Github 传送门(顺便来骗个Star) 以后一行命令上传本地文件到服务器啦 publish-sftp -c // 完事 安全性 项目组已经跑了大半年, 没出过幺蛾子, 可放心使用 实现 基于 ssh2-sftp-client 快速上手 install sudo npm i publish-sftp -g sudo npm link publish