/

如何在 Next.js 表單中上傳文件

如何在 Next.js 表單中上傳文件

我在 Next.js 頁面中有一個表單：

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

該表單呼叫一個 API 端點。

在這個表單中，我有一個 file 輸入控制元件：

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

然而在 API 路由中，我無法得到這個檔案。

我進行了一些搜索，結果發現 Next.js 預設並不允許這樣做。我嘗試了幾種解決方案，因為有些解決方案不能很好地上傳文件並同時傳送多個相同屬性的複選框。有些解決方案中，我能得到該檔案，但其餘部分的表單功能則無法正常工作。

我必須安裝兩個套件：

1
npm install next-connect multiparty

我在 Next.js 專案的根目錄中創建了一個 middleware 資料夾，在其中創建了這個檔案：

middleware/middleware.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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 路由從通常的結構改為：

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

改為：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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 路由中獲取到我上傳的檔案數據。

tags: [“Next.js”, “file upload”, “API route”, “multipart/form-data”]