在Koa.js中实现文件上传的接口功能


Posted in Javascript onOctober 08, 2019

文件上传是一个基本的功能,每个系统几乎都会有,比如上传图片、上传Excel等。 那么在Node Koa应用中如何实现一个支持文件上传的接口呢? 本文从环境准备开始、最后分别用 Postman 和一个HTML页面来测试。

01—环境准备

首先当然是要初始化一个Koa项目了,安装 Koa、koa-router 即可。

npm install koa koa-router

设置图片上传目录,把图片上传到指定的目录中,在 app 路径下新建 public 文件夹,目录结构如下:

koa-upload/

--app

----public

------uploads

----index.js

--package.json

编写 index.js

const koa = require('koa')
const app = new koa()
router.post('/upload', ctx => {
  ctx.body = 'koa upload demo'
})
app.use(router.routes());
app.listen(3000, () => {
  console.log('启动成功')
  console.log('http://localhost:3000')
});

然后启动,确保这一步没有问题。

02—使用 koa-body 中间件获取上传的文件

koa-body 支持文件、json、form格式的请求体,安装 koa-body

  npm install koa-body

设置 koaBody 配置参数,index.js

const koa = require('koa')
const koaBody = require('koa-body')
const path = require('path')
const app = new koa()
app.use(koaBody({
  // 支持文件格式
  multipart: true,
  formidable: {
    // 上传目录
    uploadDir: path.join(__dirname, 'public/uploads'),
    // 保留文件扩展名
    keepExtensions: true,
  }
}));

... ...

接下来完善 /upload 路由,获取文件,然后直接返回文件路径

router.post('/upload', ctx => {
  const file = ctx.request.files.file
  ctx.body = { path: file.path }
})

这样我们其实已经可以进行文件上传,并把文件上传到 public/uploads 中了,我们用 Postman 来测试一下。

打开 Postman,输入 http://localhost:3001/upload ,选择 POST 方法,并且选择文件用 Body 来传输,并且选择 form-data 格式,然后在 KEY 中选择 file类型。

在Koa.js中实现文件上传的接口功能

然后就可以选择图片进行上传了,上传成功后就可以看到 uploads 文件夹下有一个图片了,并且输出了图片的路径。

03—使用 koa-static 中间件生成图片链接

直接返回图片的本地路径在实际上是没什么用的,我们应该返回一个http链接的图片地址,点击地址就可以查看图片。

借助 koa-static 中间件可以帮助我们生成一个静态服务,它指定一个文件夹,文件夹下所有的文件都可以通过 http服务来访问。

安装: npm install koa-static 并注册到 app 上,我们把他注册在 koaBody 中间件的前面,把 public 设置为静态文件目录。

const koaStatic = require('koa-static')
... ...
app.use(koaStatic(path.join(__dirname, 'public')))

启动程序,这样 public 下的文件就可以使用HTTP服务来打开了,我们可以打开之前上传的图片: http://localhost:3001/uploads/upload_65c1d26e5a47870cf4011aad1243fce0.png ,可以在浏览器中直接显示了。

然后我们改造一下 upload 路由的实现,让它生成图片链接返回给客户端

router.post('/upload', ctx => {
  const file = ctx.request.files.file
  const basename = path.basename(file.path)
  ctx.body = { "url": `${ctx.origin}/uploads/${basename}` }
})

basename 可以拿到文件的文件名和扩展名,ctx.origin 拿到服务器的域名,即诸如 localhost:3001,但我们不能写死。

再用 Postman 测试一下,即可看到返回的 图片URL了,点击可以直接打开。

在Koa.js中实现文件上传的接口功能

04—编写前端页面上传文件

前面我们用 Postman 模拟了上传文件进行测试,虽然可以高效的测试我们编写的后端接口,但是我们前端有些同学可能通常更熟悉前端页面的方式测试,那么我们来写一个表单页面来测试。

在 public 中新建 upload.html 文件作为测试页面。

<form action="/upload" method="POST" enctype="multipart/form-data">
  <input type="file" name="file">
  <button type="submit">上传</button>
</form>

这是传统的表单提交,我们实际工作中这样的代码可能已经不常见了,action 就是我们的提交到的接口,enctype="multipart/form-data" 就是指定上传文件格式。 input 的 name 属性一定要等于file,因为我们接受的字段名是 file。

然后我们用HTTP服务打开这个页面: http://localhost:3001/upload.html ,因为我们整个 public 目录已经是一个静态HTTP服务目录了,里面的所有文件都可以通过HTTP访问。

在Koa.js中实现文件上传的接口功能

选择文件,点击上传,上传成功后可以看到返回了文件地址

在Koa.js中实现文件上传的接口功能

总结

以上所述是小编给大家介绍的在Koa.js中实现文件上传的接口功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
一个javascript参数的小问题
Mar 02 Javascript
火狐浏览器(firefox)下获得Event对象以及keyCode
Nov 13 Javascript
js 替换功能函数,用正则表达式解决,js的全部替换
Dec 08 Javascript
jquery中交替点击事件的实现代码
Feb 14 Javascript
简介AngularJS的HTML DOM支持情况
Jun 17 Javascript
JavaScript中this详解
Sep 01 Javascript
jQuery遍历DOM节点操作之filter()方法详解
Apr 14 Javascript
AngularJS过滤器filter用法分析
Dec 11 Javascript
Vue计算属性的学习笔记
Mar 22 Javascript
JS脚本加载后执行相应回调函数的操作方法
Feb 28 Javascript
js删除对象/数组中null、undefined、空对象及空数组方法示例
Nov 14 Javascript
JavaScript相等运算符的九条规则示例详解
Oct 20 Javascript
vue-cli和v-charts实现可视化图表过程解析
Oct 08 #Javascript
vue路由传参页面刷新参数丢失问题解决方案
Oct 08 #Javascript
vux-scroller实现移动端上拉加载功能过程解析
Oct 08 #Javascript
深入学习Vue nextTick的用法及原理
Oct 08 #Javascript
jQuery 筛选器简单操作示例
Oct 02 #jQuery
jQuery 查找元素操作实例小结
Oct 02 #jQuery
JavaScript 作用域实例分析
Oct 02 #Javascript
You might like
浅谈php命令行用法
2015/02/04 PHP
PHP 实现 JSON 数据的编码和解码操作详解
2020/04/22 PHP
js判断变量是否未定义的代码
2020/03/28 Javascript
基于OO的动画附加插件,可以实现弹跳、渐隐等动画效果 分享
2013/06/24 Javascript
JavaScript eval() 函数介绍及应用示例
2014/07/29 Javascript
分步解析JavaScript实现tab选项卡自动切换功能
2016/01/25 Javascript
Bootstarp风格的toggle效果分享
2016/02/23 Javascript
JavaScript判断页面加载完之后再执行预定函数的技巧
2016/05/17 Javascript
极力推荐一款小巧玲珑的可视化编辑器bootstrap-wysiwyg
2016/05/27 Javascript
Node.js 日志处理模块log4js
2016/08/28 Javascript
详解nodejs 文本操作模块-fs模块(四)
2016/12/22 NodeJs
Easyui Datagrid自定义按钮列(最后面的操作列)
2017/07/13 Javascript
详解jQuery获取特殊属性的值以及设置内容
2018/11/14 jQuery
Vue数据双向绑定的深入探究
2018/11/27 Javascript
Vue组件系列开发之模态框
2019/04/18 Javascript
记录一次开发微信网页分享的步骤
2019/05/07 Javascript
[54:17]DOTA2-DPC中国联赛定级赛 RNG vs iG BO3第二场 1月10日
2021/03/11 DOTA
在Mac OS上使用mod_wsgi连接Python与Apache服务器
2015/12/24 Python
浅析使用Python操作文件
2017/07/31 Python
python实现朴素贝叶斯分类器
2018/03/28 Python
python读取excel指定列数据并写入到新的excel方法
2018/07/10 Python
Python线程同步的实现代码
2018/10/03 Python
Python设计模式之外观模式实例详解
2019/01/17 Python
Python进程间通信Queue消息队列用法分析
2019/05/22 Python
Django利用cookie保存用户登录信息的简单实现方法
2019/05/27 Python
简单了解python 邮件模块的使用方法
2019/07/24 Python
什么是python的必选参数
2020/06/21 Python
一文带你掌握Pyecharts地理数据可视化的方法
2021/02/06 Python
Yahoo-PHP面试题4
2012/05/05 面试题
简历中自我评价怎么写
2014/02/12 职场文书
关于学习的演讲稿
2014/05/10 职场文书
幼儿园见习报告
2014/10/30 职场文书
督导岗位职责
2015/02/04 职场文书
雨雪天气温馨提示
2015/07/15 职场文书
一篇文章看懂MySQL主从复制与读写分离
2021/11/07 MySQL
Vue的列表之渲染,排序,过滤详解
2022/02/24 Vue.js