将 multipart/form-data POST 到 Serverless Next.js API（在 Vercel / Now.sh 上运行）

我正在使用 Vercel Serverless 函数来处理上传到 Digital Ocean Spaces 的文件（与 AWS S3 相同的 API）。但是，我在请求处理程序中处理多部分/表单数据时遇到了问题。

在前端，我使用 fetch 来发布带有文件和几个文本字段的 FormData() 对象。当在标题上记录主体和服务器时，我可以按预期看到那里的所有内容，但是当使用 Multer 处理多部分时（我也尝试了其他几个类似的包），我无法检索任何已发布的字段或文件。

另外值得注意的是，当使用 Postman 测试 POST 请求时，我遇到了完全相同的问题，因此我确信问题出在无服务器功能上。

前端：

const handleSubmit = async (values) => {
    const formData = new FormData();

    // build my Form Data from state.
    Object.keys(values).forEach(key => {
      formData.append(key, values[key]);
    });

    const response = await fetch("/api/post-submission", {
      method: "POST",
      headers: {
        Accept: "application/json",
      },
      body: formData,
    });
    const json = await response.json();
  };

无服务器处理程序：

const util = require("util");
const multer = require("multer");

module.exports = async (req, res) => {
  await util.promisify(multer().any())(req, res);
  console.log("req.body", req.body); // >> req.body [Object: null prototype] {}
  console.log("req.files", req.files); // >> req.files []

  // Do the file upload to S3...

  res.status(200).json({ uploadData });
};

预期行为：

req.body 和 req.files 应该填充我提交的数据。

2022 年更新

您可以使用 multiparty 包来解析 multipart/form-data。关键是还要导出一个config关闭 bodyParser 的对象。这将允许多方按设计工作并防止可怕的情况发生stream ended unexpectedly error.

下面的代码是上传 api 页面的完整工作示例。

import { NextApiRequest, NextApiResponse } from "next";
import multiparty from "multiparty";

const uploadImage = async (req: NextApiRequest, res: NextApiResponse) => {
  const form = new multiparty.Form();
  const data = await new Promise((resolve, reject) => {
    form.parse(req, function (err, fields, files) {
      if (err) reject({ err });
      resolve({ fields, files });
    });
  });
  console.log(`data: `, JSON.stringify(data));

  res.status(200).json({ success: true });
};

export default uploadImage;
export const config = {
  api: {
    bodyParser: false,
  },
};