node.js - 如何在Next Js中以表单数据发送文件？

Question

我在 Node js 中创建了一个用于文件上传的 API。它与 postman 一起工作正常。

我在Next Js中制作了一个用于上传Excel文件的表单。我可以在控制台中看到选定的文件。

但我无法在 formdata 中设置该文件。我在控制台中收到空表单数据。

<div>
        <input
          class="form-control w-25"
          multiple={false}
          type="file"
          id="ExcelFile"
          onChange={uploadFile}
          required
        ></input>
        {/* </label> */}
        <button
          type="button"
          // disabled={!selectedImage}
          class="btn btn-primary "
        >
          ADD SOLUTION
        </button>
      </div>

const uploadFile = ({ target: { files } }) => {
    console.log(files[0]);
    // let data = new formData();
    let FilesData = new FormData();
    FilesData.append("excel_file", files[0]);
    console.log("Files in multipart");
    console.log(FilesData);
    // data.append("file", files[0]);
  };

https://codesandbox.io/embed/next-js-forked-th22n?fontsize=14&hidenavigation=1&theme=dark

Answer 1

这是一个使用 multer 在 next.js 中提交简单表单的小示例解析表单数据。

客户端

这是客户端页面，包含一个 super 简单的 HTML 表单(无需 JS 也可以工作)

// pages/my-form.ts

export default function Page() {
  return (
    <div>
      <form id="data" method="post" action='/api/on-form-submit' encType="multipart/form-data">
        <input name="title" label="Title"/>
        <input name="video" label="Video"/>

        <button type="submit">Submit</button>
      </form>
    </div>
  );
};

服务器

这是将接收表单提交的服务器函数。

// pages/api/on-form-submit.ts

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

async function parseFormData(
  req: NextApiRequest & { files?: any },
  res: NextApiResponse
) {
  const storage = multer.memoryStorage();
  const multerUpload = multer({ storage });
  const multerFiles = multerUpload.any();
  await new Promise((resolve, reject) => {
    multerFiles(req as any, res as any, (result: any) => {
      if (result instanceof Error) {
        return reject(result);
      }
      return resolve(result);
    });
  });
  return {
    fields: req.body,
    files: req.files
  }
}

// IMPORTANT: Prevents next from trying to parse the form
export const config = {
  api: {
    bodyParser: false,
  },
};

const Handler: NextApiHandler = async (req, res) => {
  const result = await parseFormData(req, res);
  console.log(result);
  res.status(200).redirect('/success-page');
}
export default Handler;