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

Question

你好哦。

我正在尝试将图像上传到 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：

Answer 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))