NEXTJS 将表单数据发送到 api 端点 - 无响应

Posted 2023-03-06

【中文标题】NEXTJS 将表单数据发送到 api 端点 - 无响应

【英文标题】：NEXTJS Sending formdata to api endpoint - no response

【发布时间】：2021-12-27 09:56:35

【问题描述】：

你好哦。

我正在尝试将图像上传到 AWS S3，但我偶然发现了一些让我非常恼火的东西。我似乎无法理解为什么会这样。

好吧.. 我正在使用 formdata 将数据发送到我的 api 端点。 API 被调用没有任何问题，没有错误，什么都没有。就像 srly，什么都没有。在进行图片上传之前，我只是使用带有 fetch 的基本正文发布请求，但现在我使用 formdata 来上传图片。

这是我的“fetch/axios/sendthingy”

const formData = new FormData();
formData.append('file', validFiles[0]);
formData.append('postTitle', postTitle);
formData.append('postProduct', postProduct);
formData.append('postDescription', postDescription);
formData.append('postPrice', postPrice);
formData.append('postCoins', cryptocoins);
formData.append('postCategory', Cate);
formData.append('postSubCategory', subCat);
formData.append('postCryptoDiscount', cryptoDiscount);
            

for (const entry of formData.entries())

   // debugging
   console.log(entry)


var myHeaders = new Headers();
myHeaders.append("Accept", "application/json"); // or form data?

const requestOptions = 
     method: 'POST',
     body: formData,
     headers:  'Content-Type': 'application/x-www-form-urlencoded' , // or use myHeaders
     // body: JSON.stringify( postTitle: postTitle, postProduct: postProduct, postDescription: postDescription, postPrice: postPrice, postCoins: cryptocoins, postImage: validFiles[0], postCategory: Cate, postSubCategory: subCat, postCryptoDiscount: cryptoDiscount)
;

// const res = await fetch(`http://localhost:3000/api/posts/create`, requestOptions)
// const data = await res.json();

axios.post('http://localhost:3000/api/posts/create', formData).then(console.log).catch(console.error)

我的 cmets 来自使用 formdata 之前。那行得通。

如您所见，我已经安装了 Axios。我想看看 axios 是否会修复返回的东西。没有运气。关于如何解决这个问题或如何使用或不使用 formdata 将图像发送到 api 的任何想法？

好的，我们继续。下一个问题是我可以看到它调用我的 API 端点，但我的 api 端点什么也没做。它什么也不返回。什么也没做。但是当我从邮递员那里调用 api 时，它就可以正常工作了。怎么会？它创建帖子并返回正确的数据。有什么想法吗？

我的 API：

export default async function handler(req, res) 

    console.log('body', req.body);

    /*
        Redacted
    */

    res.status(200).json(response: 'test', code: 200, message:"Successfully created the post.")
)

为什么我的 API 没有在本地做任何事情......如果我从邮递员调用端点，它只会与 formdata 一起使用。

这就是我的意思.. 深色的是 Firefox，白色的是 Postman：

【问题讨论】：

我想使用我的站点将呼叫发送到端点而不是邮递员。我需要测试图片上传，据我所知，邮递员不能做这样的事情。无论如何，如果我可以在我的网站上而不是在某些第三方上实际调试等，那就更好了。

您在 Postman 请求中发送了哪些标头？尝试在您的 fetch 通话中发送相同的邮件。

【参考方案1】：

首先，您应该使用multipart/form-data 来上传文件。要查看回复，您必须对 console.log 回复如下：

axios.post(
'http://localhost:3000/api/posts/create',
 formData,
 headers:'Content-Type':'multipart/form-data'
 ).then(res => console.log(res))
  .catch(err => console.error(err))

【讨论】：

API 的响应仍然是空的。我试过但没有任何运气：-/