五、Koa2上传图片的实现

操作流程

安装koa-body替换koa-bodyparser
```
yarn add koa-body
```

设置中间件

const koaBody = require('koa-body')

const path = require('path')

app.use(koaBody({
    // 启用文件传输
    multipart: true,
    formidable: {
        // 上传目录
        uploadDir: path.join(__dirname, '/public/uploads'),
        // 保留扩展名
        keepExtensions: true
    }
}))

编写控制器

class HomeCtl {
  index (ctx) {
    ctx.body = '<h1>这是主页</h1>'
  }
  upload (ctx) {
    const file = ctx.request.files.file
    ctx.body = { path: file.path }
  }
}
module.exports = new HomeCtl()

编写路由(接口)

const { index, upload } = require('../controllers/home')
router.post('/upload', upload)

使用koa-static设置设置静态目录

安装插件
```
yarn add koa-static 
```

使用

const koaStatic = require('koa-static')
// 静态文件
app.use(koaStatic(path.join(__dirname, 'public')))

修改接口返回网络地址

upload (ctx) {
    const file = ctx.request.files.file
    const baseName = path.basename(file.path)
    ctx.body = { url: `${ctx.origin}/uploads/${baseName}` }
}

编写前端页面上传文件

同步表单

<form action="/upload" enctype="multipart/form-data" method="post">
    <input type="file" name="file" accept="image/png">
    <button type="submit">提交</button>
</form>