操作流程

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

    yarn add koa-body
  2. 设置中间件

    const koaBody = require('koa-body')
    
    const path = require('path')
    
    app.use(koaBody({
        // 启用文件传输
        multipart: true,
        formidable: {
            // 上传目录
            uploadDir: path.join(__dirname, '/public/uploads'),
            // 保留扩展名
            keepExtensions: true
        }
    }))
  3. 编写控制器

    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. 编写路由(接口)

    const { index, upload } = require('../controllers/home')
    router.post('/upload', upload)
  5. 使用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}` }
      }

编写前端页面上传文件

  1. 同步表单

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