koa-body4接收formData数据

小咪咪 2023-01-06 01:16 77阅读 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…

发表评论取消回复

表情：

评论列表（有 0 条评论，77人围观）

还没有评论，来说两句吧...

相关阅读

相关 Springmvc接收json数据的4种方式

1、以RequestParam接收前端传来的是json数据不多时：\[id:id\],可以直接用`@RequestParam`来获取值 @Autowired

Love The Way You Lie/ 2023年10月02日 15:13/ 0 赞/ 20 阅读

相关 FormData详解

`FormData` 接口提供了一种表示表单数据的键值对 `key/value` 的构造方式，并且可以轻松的将数据通过[XMLHttpRequest.send()][XMLHt

深藏阁楼爱情的钟/ 2023年10月01日 12:17/ 0 赞/ 5 阅读

相关 koa-body4接收formData数据

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

小咪咪/ 2023年01月06日 01:16/ 0 赞/ 78 阅读

相关 FormData简介

FormData 简单介绍 FormData是Ajax 2.0对象用以将数据编译成键值对，以便于`XMLHttpRequest`来发送数据。[XMLHttpReques

骑猪看日落/ 2022年11月27日 03:17/ 0 赞/ 168 阅读

相关使用FormData

FormData可以利用AJAX技术进行上传文件 / HTML中/ 上传文件<input type = 'file' id = "UploadFile" ac

骑猪看日落/ 2022年07月13日 06:22/ 0 赞/ 215 阅读

相关 springmvc接收json数据的4种方式

ajax我经常用到，传的数据是json数据，json数据又有对象，数组。所有总结下springmvc获取前端传来的json数据方式： 1、以RequestPara

电玩女神/ 2022年05月22日 06:46/ 0 赞/ 254 阅读

相关 android BLE 4.0 setCharacteristicNotification接收不到数据

问题描述最近在开发android BLE 读写数据但是向设备写数据很顺利,但是在接收设备传来的数据时,死活接收不到. Java代码 ![收藏代码][ico

ゝ一纸荒年。/ 2022年05月14日 07:05/ 0 赞/ 337 阅读

相关 FormData表单字段数据对象

FormData接口提供了一种方法，可以轻松地构造一组表示表单字段及其值的键/值对，然后使用xmlsend.send()方法轻松地发送这些值。如果将编码类型设置为“多部分/表单

ゝ一世哀愁。/ 2022年05月13日 09:12/ 0 赞/ 227 阅读

相关 FormData——编辑表单数据

formData对象的创建。 //创建空对象 let formData= new FormData(); //对空对象添加数据 formDat

小咪咪/ 2021年11月23日 08:48/ 0 赞/ 334 阅读

相关 FormData对象

FormData对象一、什么是FormData对象二、语法三、express处理formdata对象四、FormData对象实例的方法

以你之姓@/ 2021年09月07日 06:12/ 0 赞/ 424 阅读