如何在 NextJS 中读取 FormData

在Next.js中读取FormData对象通常是在客户端JavaScript中处理表单提交时发生的。但是，由于Next.js是一个服务器端渲染框架，我们还可以在API路由中处理FormData。

下面是两种情况下如何处理FormData的示例：

客户端JavaScript中处理FormData

在客户端，你可以使用原生的FormData API来处理表单数据。

javascript
// 假设你有一个表单元素，如下：
// <form id="myForm">
//   <input type="text" name="username" />
//   <input type="password" name="password" />
//   <input type="submit" />
// </form>

document.getElementById('myForm').addEventListener('submit', async (event) => {
  event.preventDefault();
  const form = event.target;
  const formData = new FormData(form);

  // 使用 fetch API 发送数据到你的API路由
  const response = await fetch('/api/yourApiRoute', {
    method: 'POST',
    body: formData, // 直接将FormData对象作为body发送
  });

  const result = await response.json();
  console.log(result);
});

在Next.js的API路由中处理FormData

在服务器端，我们通常不直接处理FormData，因为它是一个客户端API。但是，如果你需要在Next.js的API路outes中处理原始请求体中的multipart/form-data，你可以使用如multiparty或formidable这样的第三方库来解析FormData。

下面是一个使用formidable库的Next.js API路由的示例：

首先安装formidable库：

bash
npm install formidable

然后，你可以在pages/api/yourApiRoute.js中创建一个API路由来处理FormData：

javascript
import formidable from 'formidable';

export const config = {
  api: {
    bodyParser: false, // 禁用Next.js默认的JSON解析
  },
};

export default async function handler(req, res) {
  const form = new formidable.IncomingForm();

  form.parse(req, (err, fields, files) => {
    if (err) {
      res.status(500).json({ error: "Something went wrong during form parsing" });
      return;
    }

    // 这里的fields和files分别包含了表单的文本字段和文件信息
    res.status(200).json({ fields, files });
  });
}

在这个示例中，我们停用了Next.js的默认JSON请求体解析，转而使用formidable来解析multipart/form-data。form.parse()函数异步地解析请求体，并在解析完成后调用回调函数，回调函数中的fields参数将包含所有的表单文本字段，而files参数将包含所有的文件信息。

请注意，处理文件上传涉及到安全风险，务必确保你检查和处理上传的文件，避免安全隐患。