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

Question

所以我从来没有 post 在我的 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" with/without 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);
});

也许你应该设置 header。试试这个。在我的例子中，我使用了 Axios。它在我的项目中对我有用。

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

How to post data when you have javascript object using multipart/form-data content-type

multipartform-data

form-data

httprequest

fetch

reactjs