时间戳

首页 > 解决方案 > 当您使用 multipart/form-data 内容类型拥有 javascript 对象时如何发布数据

reactjs - 当您使用 multipart/form-data 内容类型拥有 javascript 对象时如何发布数据

问题描述

所以我从来没有在我的 React 项目中使用FormDataandmultipart/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是一个使用 ES6fetch处理请求的辅助函数。

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

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

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

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

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

提前致谢。

标签： reactjsfetchhttprequestmultipartform-dataform-data

解决方案

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。它在我的项目中对我有用。

推荐阅读