koa-body4接收formData数据

小咪咪 2023-01-06 01:16 100阅读 0赞

开发中往往会有上传文件的需求，最近使用了`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…