koa-body4接收formData数据

开发中往往会有上传文件的需求，最近使用了Koa作为Node后端的框架，记录一下如何接收formData的问题

Koa2中使用Koa-body4接收

前端封装数据的方式

// 以ant-design-vue上传组件为例，使用其自定义上传事件customRequest
customRequest(data) {
  const data = new FormData()
  data.append('file', data.file) // File文件
  // 如果有多个File
  // data.append('file2', data.file) 
  // ...
  
  // 如果要传额外的数据
  data.append('data1', '额外数据1')
  data.append('data2', '额外数据2')

  /*
   * 发起请求，省略...
   * 请求的需要设置为 Content-Type: multipart/form-data
   * 在回调中调用data.onSuccess()
   */
}

入口文件中，配置使用koa-body

import Koa from 'koa'
import koaBody from 'koa-body'
import Logger from '@/plugin/logger'

const app = new Koa()

// 使用中间件
app.use(koaBody({ multipart: true }))
// app.use(...)

// 错误处理
app.on('error', (err) => {
  Logger.error('app on error', err)
})

// 监听3000端口
app.listen(3000, () => {
  Logger.info('=====success listen at port:3000=====')
})

接口文件中，接收formData参数

import Router from 'koa-router'

const router = new Router()

router.post('/test', async(ctx) => {
  try {
    // 前端传单个的话则为对象，若多个File的话则为File数组
    const files = ctx.request.files.file 

	// 额外的参数，需要使用ctx.request.body获取
	const { data1, data2 } = ctx.request.body
	data1 // 额外数据1
	data2 // 额外数据2

	return ctx.success('ok')
  } catch(err) {
	return ctx.fail(err)
  }
})

Keep learning…