使用multipart / form-data内容类型的javascript对象时如何发布数据

Question

因此，我从未在我的React项目中使用FormData和multipart/form-data作为Content-Type发布数据。但是现在我有点被后端强迫以这种方式发送它，因为有效负载中有一些图像。

问题在于整个数据是一个JS对象，可以解析为JSON，仅此而已。那么，如何将我的JS对象转换为后端可以接受的有效FormData？在Postman中一切正常，但在应用程序中，我总是遇到相同的错误。

更多细节：

邮递员的工作示例：

我希望能正常工作的东西（但显然没有）：

const createProd = () =>
  HttpRequest.post('/api/prod', {
    body: {
      Product: {
        title: 'Test Prod',
        shop: null,
        description: "My new ad's description",
        category: { id: '5d8c6aa6fadeaf26b0194667' },
        condition: 'USED'
       }
    });

HttpRequest是一个助手功能，它使用ES6 fetch进行请求。

我总是遇到相同的错误："Required request part 'Product' is not present"带有/不带有JSON.stringify。

我什至试图创建一个示例FormData来至少更改错误：

cont payload = new FormData();
payload.append('Product', {foo: 'bar'});

但仍然是相同的错误。我还复制了Postman生成的代码。但是仍然没有机会。

如果您分享您的建议或解决方法，我将不胜感激。

谢谢。

Answer 1

const formData = new FormData();
const product = { //your product object };
formData.append('product', JSON.stringify(product));

const config = {
  headers: {
    'Content-Type': 'multipart/form-data; charset=utf-8; boundary="another cool boundary";'
  }
};
axios.post(`/api/ads`, formData, config).then((res) => {
  console.log(res);
}).catch(err => {
  console.log(err);
});

也许您应该设置标题。 试试这个。就我而言，我使用了Axios。在我的项目中对我有用。