欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

koa-body4接收formData数据

程序员文章站 2022-07-08 16:03:49
开发中往往会有上传文件的需求,最近使用了Koa作为Node后端的框架,记录一下如何接收formData的问题Koa2中使用Koa-body4接收前端封装数据的方式// 以ant-design-vue上传组件为例,使用其自定义上传事件customRequestcustomRequest(data) { const data = new FormData() data.append('file', data.file) // File文件 // 如果有多个File // data.app...

开发中往往会有上传文件的需求,最近使用了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://blog.csdn.net/weixin_43905402/article/details/112567777