前端上传文件到后端获取不到File对象问题（axios到koa2）

前端发送请求使用axios
后端框架为koa2

尝试使用axios的post方法直接给后端传File对象，出现500或者空对象问题

出错示例：

<input type="file" onChange={v => axios.post(URL, v.target.files[0])} />
1

解决方法：

1. Koa中的Koa-Body中间件需要开启multipart配置
2. 前端上传File时使用FormData
3. 后端通过ctx.request.files来获取File

// 前端代码
function upload(file: File) {
  const formData = new FormData()
  // 后端使用ctx.request.files获取
  formData.append('file', file)
  // 其他值依旧可以使用formData传递，只不过后端使用ctx.request.body获取
  // ...
  axios.post(URL, formData)
}

<input type="file" onChange={v => upload(v.target.files[0])} />
1
2
3
4
5
6
7
8
9
10
11

// 后端框架部分
import * as Koa from 'koa'
import * as koaBody from 'koa-body'

const app = new Koa()
app.use(koaBody({ multipart: true }))
// ...
app.listen(config.port)

// api路由部分
import * as Router from 'koa-router'

router.post('/uploadFile', async ctx => {
  const data = ctx.request.files
  // 此时的data为 {file: File对象...}
  // 可通过data.file获取File对象了
  // ...
  ctx.body = 'OK'
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

但是要注意，此时的变量data.file是formidable.File，不是浏览器下的File对象，也许不能直接上传到存储文件的云服务上，需要转成其他形式

解决方案：
在node.js环境下，formidable.File是缓存在本机上的，此时变量data.file有一个path属性是本机的绝对地址，可以使用node.js的fs模块读取该文件后再进行操作，此时的变量bufferData是Buffer类型，后续可以直接对变量bufferData进行其他操作

import { readFileSync } from 'fs'

// ...
const data = ctx.request.files
// ...

const bufferData = readFileSync(data.file.path)
1
2
3
4
5
6
7