在Next.js表单中上传文件的方法

我在Next.js页面上有一个表单。

<form method="post" action="/api/new" enctype="multipart/
form-data">...</form>

它调用了一个API端点。

在这个表单中，我有一个file 输入控件。

<input name="logo" type="file" />

现在在API路由中，我无法获得这个文件。

我搜索了一下，结果发现Next.js默认不允许这样做。我尝试了各种解决方案，因为有些解决方案在上传文件和为同一属性发送多个复选框方面发挥得不好。在一些解决方案中，我得到了文件，但表格的其他部分却不能如期工作。

我不得不安装3个软件包。

npm install next-connect multiparty

我在Next.js项目根目录下创建了一个middleware 文件夹，里面有这个文件。

middleware/middleware.js

import nextConnect from 'next-connect'
import multiparty from 'multiparty'

const middleware = nextConnect()

middleware.use(async (req, res, next) => {
  const form = new multiparty.Form()

  await form.parse(req, function (err, fields, files) {
    req.body = fields
    req.files = files
    next()
  })
})

export default middleware

我还把API路由从通常的:

export default async function handler(req, res) {
  //...
}

到:

import middleware from 'middleware/middleware'
import nextConnect from 'next-connect'

const handler = nextConnect()
handler.use(middleware)

handler.post(async (req, res) => {
  console.log(req.body)
  console.log(req.files)

  //...
})

export const config = {
  api: {
    bodyParser: false
  }
}

export default handler

我重新启动了Next.js，就能在API路由中获得我的文件数据。