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


Posted in Javascript onMarch 29, 2018

前言

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

文件上传

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

// app.js
const koa = require('koa');
const app = new koa();
const koaBody = require('koa-body');

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

app.listen(3001, ()=>{
  console.log('koa is listening in 3001');
})

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

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

  1. 创建可读流 const reader = fs.createReadStream(file.path)
  2. 创建可写流 const writer = fs.createWriteStream('upload/newpath.txt')
  3. 可读流通过管道写入可写流 reader.pipe(writer)
const router = require('koa-router')();
const fs = require('fs');

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

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

文件下载

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

const router = require('koa-router')();
const send = require('koa-send');

router.post('/download/:name', async (ctx){
 const name = ctx.params.name;
 const path = `upload/${name}`;
 ctx.attachment(path);
  await send(ctx, path);
})

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

<button onclick="handleClick()">立即下载</button>
<script>
 const handleClick = () => {
 window.open('/download/1.png');
 }
</script>

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

<button onclick="handleClick()">立即下载</button>
<iframe name="myIframe" style="display:none"></iframe>
<script>
 const handleClick = () => {
 window.open('/download/1.png', 'myIframe');
 }
</script>

批量下载

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

文件打包

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

const router = require('koa-router')();
const send = require('koa-send');
const archiver = require('archiver');

router.post('/downloadAll', async (ctx){
 // 将要打包的文件列表
 const list = [{name: '1.txt'},{name: '2.txt'}];
 const zipName = '1.zip';
 const zipStream = fs.createWriteStream(zipName);
  const zip = archiver('zip');
  zip.pipe(zipStream);
 for (let i = 0; i < list.length; i++) {
 // 添加单个文件到压缩包
 zip.append(fs.createReadStream(list[i].name), { name: list[i].name })
 }
 await zip.finalize();
 ctx.attachment(zipName);
 await send(ctx, zipName);
})

如果直接打包整个文件夹,则不需要去遍历每个文件 append 到压缩包里

const zipStream = fs.createWriteStream('1.zip');
const zip = archiver('zip');
zip.pipe(zipStream);
// 添加整个文件夹到压缩包
zip.directory('upload/');
zip.finalize();

注意:打包整个文件夹,生成的压缩包文件不可存放到该文件夹下,否则会不断的打包。

中文编码问题

当文件名含有中文的时候,可能会出现一些预想不到的情况。所以上传时,含有中文的话我会对文件名进行 encodeURI() 编码进行保存,下载的时候再进行 decodeURI() 解密。

ctx.attachment(decodeURI(path));
await send(ctx, path);

ctx.attachment 将 Content-Disposition 设置为 “附件” 以指示客户端提示下载。通过解码后的文件名作为下载文件的名字进行下载,这样下载到本地,显示的还是中文名。

然鹅, koa-send 的源码中,会对文件路径进行 decodeURIComponent() 解码:

// koa-send
path = decode(path)

function decode (path) {
 try {
  return decodeURIComponent(path)
 } catch (err) {
  return -1
 }
}

这时解码后去下载含中文的路径,而我们服务器中存放的是编码后的路径,自然就找不到对应的文件了。

要想解决这个问题,那么就别让它去解码。不想动 koa-send 源码的话,可使用另一个中间件 koa-sendfile 代替它。

const router = require('koa-router')();
const sendfile = require('koa-sendfile');

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery学习笔记之控制页面实现代码
Feb 27 Javascript
jQuery实现新消息闪烁标题提示的方法
Mar 11 Javascript
javascript Array 数组常用方法
Apr 05 Javascript
jQuery下拉美化搜索表单效果代码分享
Aug 25 Javascript
javascript 常用验证函数总结
Jun 28 Javascript
AngularJS中的缓存使用
Jan 11 Javascript
Vue.js 2.0学习教程之从基础到组件详解
Apr 24 Javascript
VueJs单页应用实现微信网页授权及微信分享功能示例
Jul 26 Javascript
详解JS模块导入导出
Dec 20 Javascript
Node.js使用MongoDB的ObjectId作为查询条件的方法
Sep 10 Javascript
JavaScript实现左右滚动电影画布
Feb 06 Javascript
jQuery实现移动端笔触canvas电子签名
May 21 jQuery
AngularJS下$http服务Post方法传递json参数的实例
Mar 29 #Javascript
Vue 将后台传过来的带html字段的字符串转换为 HTML
Mar 29 #Javascript
利用js实现前后台传送Json的示例代码
Mar 29 #Javascript
vue中Npm run build 根据环境传递参数方法来打包不同域名
Mar 29 #Javascript
JS获取url参数,JS发送json格式的POST请求方法
Mar 29 #Javascript
spirngmvc js传递复杂json参数到controller的实例
Mar 29 #Javascript
Vue.js 表单控件操作小结
Mar 29 #Javascript
You might like
thinkPHP+phpexcel实现excel报表输出功能示例
2017/06/06 PHP
Javascript miscellanea -display data real time, using window.status
2007/01/09 Javascript
使用Json比用string返回数据更友好,也更面向对象一些
2011/09/13 Javascript
js 定时器setTimeout无法调用局部变量的解决办法
2013/11/28 Javascript
js换图片效果可进行定时操作
2014/06/09 Javascript
仅9张思维导图帮你轻松学习Javascript 就这么简单
2016/06/01 Javascript
JavaScript中的Array 对象(数组对象)
2016/06/02 Javascript
关于Iframe父页面与子页面之间的相互调用
2016/11/22 Javascript
JavaScript之面向对象_动力节点Java学院整理
2017/06/29 Javascript
TypeScript基础入门教程之三重斜线指令详解
2018/10/22 Javascript
vue基础之事件简写、事件对象、冒泡、默认行为、键盘事件实例分析
2019/03/11 Javascript
package.json各个属性说明详解
2020/03/11 Javascript
Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能详解
2020/04/29 Javascript
在vue中给后台接口传的值为数组的格式代码
2020/11/12 Javascript
原生jQuery实现只显示年份下拉框
2020/12/24 jQuery
python查询mysql中文乱码问题
2014/11/09 Python
python搭建微信公众平台
2016/02/09 Python
Python+Socket实现基于UDP协议的局域网广播功能示例
2017/08/31 Python
基于python中的TCP及UDP(详解)
2017/11/06 Python
django传值给模板, 再用JS接收并进行操作的实例
2018/05/28 Python
详解python 模拟豆瓣登录(豆瓣6.0)
2019/04/18 Python
解决python3 安装不了PIL的问题
2019/08/16 Python
Django 解决上传文件时,request.FILES为空的问题
2020/05/20 Python
python实现批量转换图片为黑白
2020/06/16 Python
学习Python需要哪些工具
2020/09/04 Python
北美三大旅游网站之一:Travelocity
2017/08/12 全球购物
雷朋巴西官方商店:Ray-Ban Brasil
2020/07/21 全球购物
实习自我鉴定模板
2013/09/28 职场文书
魅力教师事迹材料
2014/01/10 职场文书
高中课程设置方案
2014/05/28 职场文书
厨师长岗位职责范本
2014/08/25 职场文书
初中优秀学生评语
2014/12/29 职场文书
项目经理岗位职责
2015/01/31 职场文书
MySQL update set 和 and的区别
2021/05/08 MySQL
浅谈Python中的正则表达式
2021/06/28 Python
mysql分表之后如何平滑上线详解
2021/11/01 MySQL