如何在 Next Js 中以表单数据发送文件？答案

【问题标题】：How to send file in form data in Next Js?如何在 Next Js 中以表单数据发送文件？
【发布时间】：2022-01-12 20:06:23
【问题描述】：

我在 Node js 中创建了一个用于文件上传的 API。邮递员工作得很好。

我在 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

【问题讨论】：

请添加一些代码来显示您想要做什么以及正在发生的事情。
这里FilesData 空了@AnkushVerma
你能把它添加到某个沙箱并分享链接吗？
这里是链接https://codesandbox.io/embed/next-js-forked-th22n?fontsize=14&hidenavigation=1&theme=dark@AnkushVerma
FormData 内容在浏览器控制台中不可见您是否尝试使用 API 上传它

标签： node.js reactjs api next.js

【解决方案1】：

如果您尝试 console.log FormData 对象，您只会得到空对象。相反，您应该在 FormData 对象上调用 entries 方法。

for (const pair of FilesData.entries()){
  console.log(pair)
}

它将返回 arrays 的键值对列表。

【讨论】：

【解决方案2】：

请注意，您在 console.log 中看不到您的 formData 如果您想使用 formData 传递数据，您必须在服务器中使用一个中间件，如下所示：https://nextjs.org/docs/api-routes/api-middlewares 我只用一个例子可能有用：在您的表单数据中：

var FormData = require("form-data");

let data = new FormData()
data.append("urlOrContent", urlOrContent)

然后在您的服务器端发送您的 formData 在您的服务器端：

import middleware from "./middleware/middleware";

import nextConnect from "next-connect";

const handler = nextConnect();
handler.use(middleware);

handler.post(async (req, res) => {
//in formData: req.body.urlOrcontent[0]
  try {
    const response = await fetch(
      req.body?.urlOrContent[0],
    );
    res.status(200).send({
      data: {
        message: "Success",
        data: response.json(),
      },
    });
  } catch (err) {
    let e = {
      func: "states.handler",
      message: "خطای داخلی سرور رخ داده است!",
      error: "Internal Server Error!",
      code: 500,
    };
    res.status(500).json(e);
  }
});

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

【讨论】：