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