操作流程

  1. 安装koa-body替换koa-bodyparser

    1
    yarn add koa-body

  2. 设置中间件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    const koaBody = require('koa-body')

    const path = require('path')

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

  3. 编写控制器

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    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()

  4. 编写路由(接口)

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

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

    • 安装插件

      1
      yarn add koa-static

    • 使用

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

    • 修改接口返回网络地址

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

编写前端页面上传文件

  1. 同步表单

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