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…