Skip to main content

Handle File Payload in Next.js

在 Next.js 项目中

  • 前端如何发送图片和视频？
  • 后端如何接收并解析数据？

client 端​

使用 FormData 来发送 file 到服务端：

const formData = new FormData();
formData.append('file', file);
axios.post('/api/upload_file', formData);

server 端​

  1. 关闭 bodyParser

在 Next.js 中，默认会解析 body 为 json，所以我们需要修改 api 的默认配置. 比如你的 api 路由是/pages/sayHello.ts, 那么在sayHello.ts中增加以下代码就可以修改路由配置：

export const config = {
  api: {
    bodyParser: false,
  },
};
  1. 解析 FormData 中的 files

安装类库 formidable。

npm install formidable

使用：

export default function handler(req: NextApiRequest, res: NextApiResponse) {
  const form = formidable({ multiples: true });
  form.parse(req, (err, fields, files) => {
    if (err) {
      console.error(err);
      return;
    }
    // handle data
  });
}
note

需要注意的是，在 👆🏻 代码回调函数中files和files的结构体都是{key:value[]}，比如刚才 client 发送的 file 字段，读取的方式是files.file[0].