在过去的几个小时里,我一直被这个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
1条答案
按热度按时间lf5gs5x21#
我知道这是一个老问题,但也许你有这个onCLick函数对您的提交按钮(表单元素)应用,你没有防止默认()对您的方法,而不是使用逻辑在您的onClick方法,它试图发送表单不同?