基于Node.js的大文件分片上传示例

2023-08-21 09:29:05 266

我们在做文件上传的时候，如果文件过大，可能会导致请求超时的情况。所以，在遇到需要对大文件进行上传的时候，就需要对文件进行分片上传的操作。同时如果文件过大，在网络不佳的情况下，如何做到断点续传？也是需要记录当前上传文件，然后在下一次进行上传请求的时候去做判断。

先上代码：代码仓库地址

前端

1.index.html







文件上传









大文件上传测试

自定义上传文件

2.依赖的文件
axios.js
jquery
spark-md5.js

后端

1.app.js

constKoa=require('koa');
constapp=newKoa();
constRouter=require('koa-router');
constmulter=require('koa-multer');
constserve=require('koa-static');
constpath=require('path');
constfs=require('fs-extra');
constkoaBody=require('koa-body');
const{mkdirsSync}=require('./utils/dir');
constuploadPath=path.join(__dirname,'uploads');
constuploadTempPath=path.join(uploadPath,'temp');
constupload=multer({dest:uploadTempPath});
constrouter=newRouter();
app.use(koaBody());
/**
*single(fieldname)
*Acceptasinglefilewiththenamefieldname.Thesinglefilewillbestoredinreq.file.
*/
router.post('/file/upload',upload.single('file'),async(ctx,next)=>{
console.log('fileupload...')
//根据文件hash创建文件夹，把默认上传的文件移动当前hash文件夹下。方便后续文件合并。
const{
name,
total,
index,
size,
hash
}=ctx.req.body;

constchunksPath=path.join(uploadPath,hash,'/');
if(!fs.existsSync(chunksPath))mkdirsSync(chunksPath);
fs.renameSync(ctx.req.file.path,chunksPath+hash+'-'+index);
ctx.status=200;
ctx.res.end('Success');
})

router.post('/file/merge_chunks',async(ctx,next)=>{
const{
size,name,total,hash
}=ctx.request.body;
//根据hash值，获取分片文件。
//创建存储文件
//合并
constchunksPath=path.join(uploadPath,hash,'/');
constfilePath=path.join(uploadPath,name);
//读取所有的chunks文件名存放在数组中
constchunks=fs.readdirSync(chunksPath);
//创建存储文件
fs.writeFileSync(filePath,'');
if(chunks.length!==total||chunks.length===0){
ctx.status=200;
ctx.res.end('切片文件数量不符合');
return;
}
for(leti=0;i
2.utils/dir.js


constpath=require('path');
constfs=require('fs-extra');
constmkdirsSync=(dirname)=>{
if(fs.existsSync(dirname)){
returntrue;
}else{
if(mkdirsSync(path.dirname(dirname))){
fs.mkdirSync(dirname);
returntrue;
}
}
}
module.exports={
mkdirsSync
};

操作步骤说明


服务端的搭建


我们以下的操作都是保证在已经安装node以及npm的前提下进行。node的安装以及使用可以参考官方网站。
1、新建项目文件夹file-upload
2、使用npm初始化一个项目：cdfile-upload&&npminit
3、安装相关依赖
npmikoa
npmikoa-router--save//Koa路由
npmikoa-multer--save//文件上传处理模块
npmikoa-static--save//Koa静态资源处理模块
npmifs-extra--save//文件处理
npmikoa-body--save//请求参数解析
4、创建项目结构
file-upload
-static
-index.html
-spark-md5.min.js
-uploads
-temp
-utils
-dir.js
-app.js

5、复制相应的代码到指定位置即可


6、项目启动：nodeapp.js(可以使用nodemon来对服务进行管理)


7、访问：http://localhost:9000/index.html


其中细节部分代码里有相应的注释说明，浏览代码就一目了然。


后续延伸：断点续传、多文件多批次上传


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

基于Node.js的大文件分片上传示例

大文件上传测试

自定义上传文件

热门推荐

随机推荐