Koa2 之文件上传下载的示例代码

2023-09-14 18:56:07 63

前言

上传下载在web应用中还是比较常见的，无论是图片还是其他文件等。在Koa中，有很多中间件可以帮助我们快速的实现功能。

文件上传

在前端中上传文件，我们都是通过表单来上传，而上传的文件，在服务器端并不能像普通参数一样通过ctx.request.body获取。我们可以用koa-body中间件来处理文件上传，它可以将请求体拼到ctx.request中。

//app.js
constkoa=require('koa');
constapp=newkoa();
constkoaBody=require('koa-body');

app.use(koaBody({
multipart:true,
formidable:{
maxFileSize:200*1024*1024//设置上传文件大小最大限制，默认2M
}
}));

app.listen(3001,()=>{
console.log('koaislisteningin3001');
})

使用中间件后，就可以在ctx.request.body.files中获取上传的文件内容。需要注意的就是设置maxFileSize，不然上传文件一超过默认限制就会报错。

接收到文件之后，我们需要把文件保存到目录中，返回一个url给前端。在node中的流程为

创建可读流constreader=fs.createReadStream(file.path)
创建可写流constwriter=fs.createWriteStream('upload/newpath.txt')
可读流通过管道写入可写流reader.pipe(writer)

constrouter=require('koa-router')();
constfs=require('fs');

router.post('/upload',async(ctx){
constfile=ctx.request.body.files.file;//获取上传文件
constreader=fs.createReadStream(file.path);//创建可读流
constext=file.name.split('.').pop();//获取上传文件扩展名
constupStream=fs.createWriteStream(`upload/${Math.random().toString()}.${ext}`);//创建可写流
reader.pipe(upStream);//可读流通过管道写入可写流
returnctx.body='上传成功';
})

该方法适用于上传图片、文本文件、压缩文件等。

文件下载

koa-send是一个静态文件服务的中间件，可用来实现文件下载功能。

constrouter=require('koa-router')();
constsend=require('koa-send');

router.post('/download/:name',async(ctx){
constname=ctx.params.name;
constpath=`upload/${name}`;
ctx.attachment(path);
awaitsend(ctx,path);
})

在前端进行下载，有两个方法：window.open和表单提交。这里使用简单一点的window.open。

立即下载

这里window.open默认是开启一个新的窗口，一闪然后关闭，给用户的体验并不好，可以加上第二个参数window.open('/download/1.png','_self');，这样就会在当前窗口直接下载了。然而这样是将url替换当前的页面，则会触发beforeunload等页面事件，如果你的页面监听了该事件做一些操作的话，那就有影响了。那么还可以使用一个隐藏的iframe窗口来达到同样的效果。

立即下载

批量下载

批量下载和单个下载也没什么区别嘛，就多执行几次下载而已嘛。这样也确实没什么问题。如果把这么多个文件打包成一个压缩包，再只下载这个压缩包，是不是体验起来就好一点了呢。

文件打包

archiver是一个在Node.js中能跨平台实现打包功能的模块，支持zip和tar格式。

constrouter=require('koa-router')();
constsend=require('koa-send');
constarchiver=require('archiver');

router.post('/downloadAll',async(ctx){
//将要打包的文件列表
constlist=[{name:'1.txt'},{name:'2.txt'}];
constzipName='1.zip';
constzipStream=fs.createWriteStream(zipName);
constzip=archiver('zip');
zip.pipe(zipStream);
for(leti=0;i
如果直接打包整个文件夹，则不需要去遍历每个文件append到压缩包里
constzipStream=fs.createWriteStream('1.zip');
constzip=archiver('zip');
zip.pipe(zipStream);
//添加整个文件夹到压缩包
zip.directory('upload/');
zip.finalize();

注意：打包整个文件夹，生成的压缩包文件不可存放到该文件夹下，否则会不断的打包。
中文编码问题
当文件名含有中文的时候，可能会出现一些预想不到的情况。所以上传时，含有中文的话我会对文件名进行encodeURI()编码进行保存，下载的时候再进行decodeURI()解密。
ctx.attachment(decodeURI(path));
awaitsend(ctx,path);
ctx.attachment将Content-Disposition设置为“附件”以指示客户端提示下载。通过解码后的文件名作为下载文件的名字进行下载，这样下载到本地，显示的还是中文名。
然鹅，koa-send的源码中，会对文件路径进行decodeURIComponent()解码：
//koa-send
path=decode(path)

functiondecode(path){
try{
returndecodeURIComponent(path)
}catch(err){
return-1
}
}


这时解码后去下载含中文的路径，而我们服务器中存放的是编码后的路径，自然就找不到对应的文件了。
要想解决这个问题，那么就别让它去解码。不想动koa-send源码的话，可使用另一个中间件koa-sendfile代替它。
constrouter=require('koa-router')();
constsendfile=require('koa-sendfile');

router.post('/download/:name',async(ctx){
constname=ctx.params.name;
constpath=`upload/${name}`;
ctx.attachment(decodeURI(path));
awaitsendfile(ctx,path);
})


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

Koa2 之文件上传下载的示例代码

热门推荐

随机推荐