在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 相关文章推荐
用JQuery 实现的自定义对话框
Mar 24 Javascript
JQuery获取样式中的background-color颜色值的问题
Aug 20 Javascript
SuperSlide2实现图片滚动特效
Jun 20 Javascript
Bootstrap每天必学之js插件
Nov 30 Javascript
使用递归遍历对象获得value值的实现方法
Jun 14 Javascript
JavaScript 数组- Array的方法总结(推荐)
Jul 21 Javascript
Angularjs验证用户输入的字符串是否为日期时间
Jun 01 Javascript
微信小程序获取手机系统信息的方法【附源码下载】
Dec 07 Javascript
javascript实现5秒倒计时并跳转功能
Jun 20 Javascript
vue实现数据控制视图的原理解析
Jan 07 Javascript
关于angular浏览器兼容性问题的解决方案
Jul 26 Javascript
JS算法教程之字符串去重与字符串反转
Dec 15 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使用正则表达式提取字符串中尖括号、小括号、中括号、大括号中的字符串
2020/04/05 PHP
让CodeIgniter的ellipsize()支持中文截断的方法
2014/06/12 PHP
推荐几个开源的微信开发项目
2014/12/28 PHP
PHP实现获取某个月份周次信息的方法
2015/08/11 PHP
PHP中的print_r 与 var_dump 输出数组
2016/06/13 PHP
文本加密解密
2006/06/23 Javascript
checkbox勾选判断代码分析
2014/06/11 Javascript
jQuery实现当前页面标签高亮显示的方法
2015/03/10 Javascript
prototype.js常用函数详解
2016/06/18 Javascript
原生JS上传大文件显示进度条 php上传文件代码
2020/03/27 Javascript
提升node.js中使用redis的性能遇到的问题及解决方法
2018/10/30 Javascript
这应该是最详细的响应式系统讲解了
2019/07/22 Javascript
layui 弹出层回调获取弹出层数据的例子
2019/09/02 Javascript
Vue 实现分页与输入框关键字筛选功能
2020/01/02 Javascript
jquery实现拖拽添加元素功能
2020/12/01 jQuery
Python中多线程thread与threading的实现方法
2014/08/18 Python
Python实现对文件进行单词划分并去重排序操作示例
2018/07/10 Python
python字典改变value值方法总结
2019/06/21 Python
Python读取YAML文件过程详解
2019/12/30 Python
pycharm下配置pyqt5的教程(anaconda虚拟环境下+tensorflow)
2020/03/25 Python
Python使用pyexecjs代码案例解析
2020/07/13 Python
Python中生成ndarray实例讲解
2021/02/22 Python
财务助理岗位职责
2013/11/10 职场文书
应届大学生的推荐信
2013/11/20 职场文书
化工专业推荐信范文
2013/11/28 职场文书
职业技术学校毕业生推荐信
2013/12/03 职场文书
工作交流会欢迎词
2014/01/12 职场文书
互联网创业计划书的书写步骤
2014/01/28 职场文书
优秀应届毕业生推荐信
2014/02/18 职场文书
《浅水洼里的小鱼》听课反思
2014/02/28 职场文书
工程造价专业大学生职业规划范文
2014/03/09 职场文书
教师四风自我剖析材料
2014/09/30 职场文书
工艺技术员岗位职责
2015/02/04 职场文书
护理工作个人总结
2015/03/03 职场文书
CSS3鼠标悬浮过渡缩放效果
2021/04/17 HTML / CSS
Python Matplotlib绘制条形图的全过程
2021/10/24 Python