上传图片需求

koa-body 的基本使用

在 koa2 中使用 koa-body,我使用的是全局引入，而不是路由级别的引入，因为考虑到很多地方都有 post 请求或者是文件上传请求，没必要只在路由级别引入。

1、安装依赖

npm i koa-body -S

2、index.js

const koaStatic = require('koa-static')
app.use(
  bodyparser({
    multipart: true, //允许文件上传
    formidable: {
      uploadDir: path.join(__dirname, 'public/uploads/'), //文件上传的路径
      keepExtensions: true //保留文件拓展名
    }
  })
)

控制器设计

  upload(ctx) {
    const basename = path.basename(ctx.request.files.file.path)
// ctx.origin 获取  host value
    ctx.body = { path: `${ctx.origin}/uploads/${basename}` }
  }

路由设计

router.post('/upload', homeCtrl.upload)

前端页面设计

 <form action="/upload" enctype="multipart/form-data" method="POST">
 <!-- 这里的name=‘file’是根据我们后端的代码来设置的，
   因为我们后端获取文件的代码是ctx.request.files.file -->
 <!-- accept 指定上传文件的类型 -->
 <!-- accept=“image/*”为所有图片格式 -->
 <input type="file" name="file" accept=".jpg,.png,.jepg" />
 <input type="submit" value="上传" />
</form>