javascript Next.js API路由来自客户端的图像上传问题

lztngnrs  于 2023-02-11  发布在  Java
关注(0)|答案(1)|浏览(110)

在过去的几个小时里,我一直被这个bug困扰着,似乎找不到原因。本质上,我试图在next.js中编写一个API路由,它能够修改图像,然后将其上传到存储。每当我从localhost上传图像并调用fetch请求时,在api路由中找不到文件,我得到一个空对象。然而,当我向 Postman 提出要求时,一切都很顺利。我不知道两者会有什么不同,我将感激任何帮助!
这是客户端上被调用的代码。{}记录到控制台

onClick={async () => {
      const data = new FormData();
      data.append("image", imageFile);
      const res = await fetch("/api/cropImages", {
        method: "POST",
        data,
      });
      console.log(await res.json());
    }}

这是我的API路线

import { IncomingForm } from "formidable";
export const config = {
  api: {
    bodyParser: false,
  },
};
export default async (req, res) => {
  const data = await new Promise((resolve, reject) => {
    const form = new IncomingForm();
    form.parse(req, (err, fields, files) => {
      if (err) return reject(err);
      resolve({ fields, files });
    });
  });
  const file = data?.files?.image;
  console.log(file);
  res.status(200).json({ file });
};

这是对 Postman 的要求
Postman request
下面是图像文件:imagefile

lf5gs5x2

lf5gs5x21#

我知道这是一个老问题,但也许你有这个onCLick函数对您的提交按钮(表单元素)应用,你没有防止默认()对您的方法,而不是使用逻辑在您的onClick方法,它试图发送表单不同?

相关问题