Koa2 之文件上传下载的示例代码
前言
上传下载在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); })以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。