開發中往往會有上傳檔案的需求，最近使用了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…
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/248505.html
標籤：其他
上一篇：5款國產ARM芯片(對標stm32f103c8t6)測驗評估
下一篇：STM32學習筆記（五）