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

文件上传是一个基本的功能,每个系统几乎都会有,比如上传图片、上传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类型。

然后就可以选择图片进行上传了,上传成功后就可以看到 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了,点击可以直接打开。

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中实现文件上传的接口功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

(0)

相关推荐

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

    文件上传是一个基本的功能,每个系统几乎都会有,比如上传图片.上传Excel等. 那么在Node Koa应用中如何实现一个支持文件上传的接口呢? 本文从环境准备开始.最后分别用 Postman 和一个HTML页面来测试. 01-环境准备 首先当然是要初始化一个Koa项目了,安装 Koa.koa-router 即可. npm install koa koa-router 设置图片上传目录,把图片上传到指定的目录中,在 app 路径下新建 public 文件夹,目录结构如下: koa-upload/

  • JS中使用FormData上传文件、图片的方法

    关于FormData XMLHttpRequest Level 2添加了一个新的接口  ---- FormData 利用FormData对象,可以通过js用一些键值对来模拟一系列表单控件,可以使用XMLHttpRequest的 send( ) 方法来异步提交表单与普通的ajax相比,使用FormData的最大优点就是可以异步上传二进制文件 FormData对象 FormData对象,可以把所有表单元素的name与value组成一个queryString,提交到后台. 在使用ajax提交时,使用F

  • js HTML5 Ajax实现文件上传进度条功能

    本文实例介绍了js结合HTML5 Ajax实现文件上传进度条功能,分享给大家供大家参考,具体内容如下 1.  lib.js var Host = window.location.host; //--Cookie function setCookie(name,value) { var Days = 30; var exp = new Date(); exp.setTime(exp.getTime() + Days*24*60*60*1000); document.cookie = name +

  • Electron中实现大文件上传和断点续传功能

    Electron官网的描述:Electron是由Github开发,用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一个开源库. Electron通过将Chromium和Node.js合并到同一个运行时环境中,并将其打包为Mac,Windows和Linux系统下的应用来实现这一目的. 从官网的描述我们可以简单的概括,Electron是开源的框架,可以使用h5来开发跨平台pc桌面应用,这样前端开发这可以开发桌面应用了.由于它是基于Chromium和Node.js开发的,所以在Ele

  • JS+Struts2多文件上传实例详解

    本文实例为大家分享了JS Struts2多文件上传的具体代码,供大家参考,具体内容如下 1.JSP页面: JS控制增加删除多个上传文件框,代码如下: <%@ page language="java" pageEncoding="UTF-8"%> <%@ taglib prefix="s" uri="/struts-tags"%> <!DOCTYPE html PUBLIC "-//W3C

  • 如何基于js管理大文件上传及断点续传详析

    目录 前言 前端结构 后端结构(node + express) 基于FormData实现文件上传 基于BASE64实现文件上传 BASE64具体方法 前端生成文件名传给后端 上传进度管控 大文件上传 服务端代码(大文件上传+断点续传) 总结 前言 前端小伙伴们平常在开发过程中文件上传是经常遇到的一个问题,也许你能够实现相关的功能,但是做完后回想代码实现上是不是有点"力不从心"呢?你真的了解文件上传吗?如何做到大文件上传以及断电续传呢,前后端通讯常用的格式,文件上传进度管控,服务端是如何

  • Ajax 配合node js multer 实现文件上传功能

    说明 作为一个node 初学者,最近在做一个聊天软件,支持注册.登录.在线单人.多人聊天.表情发送.各种文件上传下载.增删好友.聊天记录保存.通知声开关.背景图片切换.游戏等功能,所以用到了multer 模块,经过各种查文档,做demo例子,终于成功实现单个文件上传功能,支持大部分文件格式上传,同时显示到网页上 效果 是不是有种微信即视感,没错,就是根据网页版微信来做的, 要实现整体效果的话,要配合css和html来做,前端初学者,第一次发博客,实在捉急,近期,将会将代码放到github上去,感

  • Java中实现文件上传下载的三种解决方案(推荐)

    java文件上传与文件下载是程序开发中比较常见的功能,下面通过本文给大家介绍Java中实现文件上传下载的三种解决方案,具体详情如下所示: 第一点:Java代码实现文件上传 FormFile file=manform.getFile(); String newfileName = null; String newpathname=null; String fileAddre="/numUp"; try { InputStream stream = file.getInputStream(

  • 基于HTML5+js+Java实现单文件文件上传到服务器功能

    上传单文件到服务器       应公司要求,在HTML5页面上实现上传文件到服务器,对于一个还没毕业的实习生菜鸟来说,这可不得了-----不会,网上各种百度,找各种博客还是没解决,最后还是请教了公司的大神,人家给卸了一个例子,然后根据人家写的终于把这个上传文件搞定. 好了,开始上代码. HTML5代码: <form name="upform" action="" method="POST"> <input type ="

  • PHP中,文件上传

    在PHP中,文件上传一般是通过move_uploaded_file()来实现的.  bool move_uploaded_file ( string filename, string destination )本函数检查并确保由 filename 指定的文件是合法的上传文件(即通过 PHP 的 HTTP POST 上传机制所上传的).如果文件合法,则将其移动为由 destination 指定的文件. 如果 filename 不是合法的上传文件,不会出现任何操作,move_uploaded_fil

随机推荐