javascript - How to read FormData in NextJS - Stack Overflow

admin管理员组

文章数量:1208155

I'd like to read fetch's body. Here's what I send:

fetch('/api/foo', {
  method: 'POST',
  body: new FormData(formRef.current),
});

And now I only need to parse the body. But I don't know how. I can't use FormData on the server side, because it says ReferenceError: FormData is not defined. And I can't also use forEach like on the client.

What should I do?

export default function sendMail(req: NextApiRequest, res: NextApiResponse): void {
    // console.log(req.body instanceof FormData);
    // req.body.forEach(console.log);
    console.log(req.body['name']);
    res.status(200).json({});
}

I'd like to read fetch's body. Here's what I send:

fetch('/api/foo', {
  method: 'POST',
  body: new FormData(formRef.current),
});

And now I only need to parse the body. But I don't know how. I can't use FormData on the server side, because it says ReferenceError: FormData is not defined. And I can't also use forEach like on the client.

What should I do?

export default function sendMail(req: NextApiRequest, res: NextApiResponse): void {
    // console.log(req.body instanceof FormData);
    // req.body.forEach(console.log);
    console.log(req.body['name']);
    res.status(200).json({});
}

• javascript
• node.js
• typescript
• next.js
• multipartform-data

Share Improve this question Follow asked Mar 17, 2021 at 14:11 Ivan AdanenkoIvan Adanenko 57522 gold badges66 silver badges2121 bronze badges 2

• Does this answer your question? POST multipart/form-data to Serverless Next.js API (running on Vercel / Now.sh) – fjc Commented Mar 17, 2021 at 14:15
• It doesn't work – Ivan Adanenko Commented Mar 17, 2021 at 14:44

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 17

You could use formidable.

npm install formidable

Then in your code use

import { NextApiRequest, NextApiResponse } from 'next'
import { Formidable } from "formidable";

//set bodyparser
export const config = {
  api: {
    bodyParser: false
  }
}

export default async (req: NextApiRequest, res: NextApiResponse) => {
  const data = await new Promise((resolve, reject) => {
    const form = new Formidable();

    form.parse(req, (err, fields, files) => {
      if (err) reject({ err })
      resolve({ err, fields, files })
    }) 
  })

  //return the data back or just do whatever you want with it
  res.status(200).json({
    status: 'ok',
    data
  })
}

If you are using route-handlers of NextJS, you can do the following :

export async function POST(request: NextRequest) {
  const formData = await request.formData();
  const email = formData.get('email');
  const password = formData.get('password');
  return NextResponse.json({
    message: 'Logged in successfully'
  });
}

本文标签： javascriptHow to read FormData in NextJSStack Overflow