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 相关文章推荐
javascript 事件查询综合 推荐收藏
Mar 10 Javascript
如何判断微信内置浏览器(通过User Agent实现)
Sep 01 Javascript
JavaScript中Cookie操作实例
Jan 09 Javascript
详解JavaScript中setSeconds()方法的使用
Jun 11 Javascript
easyui form validate总是返回false的原因及解决方法
Nov 07 Javascript
Angular.js中处理页面闪烁的方法详解
Mar 09 Javascript
JavaScript实现省市联动过程中bug的解决方法
Dec 04 Javascript
学习jQuery中的noConflict()用法
Sep 28 jQuery
用node开发并发布一个cli工具的方法步骤
Jan 03 Javascript
微信小程序时间戳转日期的详解
Apr 30 Javascript
JS自定义对象创建与简单使用方法示例
Jan 15 Javascript
vue实现选中效果
Oct 07 Javascript
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
下拉列表多级联动dropDownList示例代码
2013/06/27 PHP
浅析php数据类型转换
2014/01/09 PHP
分享PHP源码批量抓取远程网页图片并保存到本地的实现方法
2015/12/01 PHP
PHP简单数据库操作类实例【支持增删改查及链式操作】
2016/10/10 PHP
推荐自用 Javascript 缩图函数 (onDOMLoaded)……
2007/10/23 Javascript
jQuery中绑定事件的命名空间详解
2011/04/05 Javascript
重构Javascript代码示例(重构前后对比)
2013/01/23 Javascript
jquery组件使用中遇到的问题整理及解决
2014/02/21 Javascript
jQuery实现自定义事件的方法
2015/04/17 Javascript
JavaScript获取select中text值的方法
2017/02/13 Javascript
jQuery Validate 校验多个相同name的方法
2017/05/18 jQuery
JavaScript上传文件时不用刷新页面方法总结(推荐)
2017/08/15 Javascript
npm全局模块卸载及默认安装目录修改方法
2018/05/15 Javascript
浅谈vue同一页面中拥有两个表单时,的验证问题
2018/09/18 Javascript
Nodejs实现的操作MongoDB数据库功能完整示例
2019/02/02 NodeJs
详解如何使用微信小程序云函数发送短信验证码
2019/03/13 Javascript
vue组件三大核心概念图文详解
2019/05/30 Javascript
layer ui 导入文件之前传入数据的实例
2019/09/23 Javascript
详解Python的Django框架中的模版相关知识
2015/07/15 Python
python实现音乐下载器
2018/04/15 Python
基于DataFrame筛选数据与loc的用法详解
2018/05/18 Python
Python自定义函数计算给定日期是该年第几天的方法示例
2019/05/30 Python
python nmap实现端口扫描器教程
2020/05/28 Python
python列表返回重复数据的下标
2020/02/10 Python
如何打包Python Web项目实现免安装一键启动的方法
2020/05/21 Python
Bose加拿大官方网站:美国知名音响品牌
2019/03/21 全球购物
C++如何引用一个已经定义过的全局变量
2014/08/25 面试题
数控技术与应用毕业生自荐信
2013/09/24 职场文书
新教师培训心得体会
2014/09/02 职场文书
2016自主招生教师推荐信范文
2015/03/23 职场文书
检讨书格式
2015/05/07 职场文书
二审答辩状范文
2015/05/22 职场文书
呐喊读书笔记
2015/06/30 职场文书
小学英语教师2015年度个人工作总结
2015/10/14 职场文书
干货干货!2019最新优秀创业计划书
2019/03/21 职场文书
Golang MatrixOne使用介绍和汇编语法
2022/04/19 Golang