尝试使用 axios.post 发布 formData 但出现“不支持的媒体类型”错误

问题描述 投票:0回答:1

我正在尝试通过 axios.post 向 spring boot 服务器发送 post 请求。 这是我的代码片段

export function createSingleProduct(productData) {
  const formData = new FormData();
  const data = {
    catergoryName: productData[0].product.categoryName,
    productName: productData[0].product.productName,
    serialNumber: productData[0].product.serialNumber,
    purchasePrice: parseInt(productData[0].product.purchasePrice),
    purchaseDate: productData[0].product.purchaseDate,
    warrantyInYears: parseInt(productData[0].product.warrantyInYears),
    warrantyExpiryDate: productData[0].product.warrantyExpiryDate,
  };

  formData.append("product", data);
  formData.append("productPhoto", productData[0].productPhoto);

  const config = {
    headers: {
      apiKey: api_key,
      "Content-Type": "multipart/form-data",
    },

  };
  console.log(config.headers);

  return axios.post(`${API_BASE_URL}/products`, formData, config);
}

我已经指定了内容类型,但我仍然收到以下错误:

{
    "timestamp": "05-20-2023 01:27:36",
    "status": 415,
    "error": "Unsupported Media Type",
    "message": "Content type 'application/octet-stream' not supported",
    "path": "/product-crud/products"
}

后台没问题。我已经和邮递员核实过了。任何人都可以帮助我吗?

编辑

邮递员文档显示了这样一个示例请求:

var axios = require('axios');
var FormData = require('form-data');
var fs = require('fs');
var data = new FormData();
data.append('product', '{\n    "categoryName": "Electronics",\n    "productName": "Desktop",\n    "serialNumber": "5007",\n    "purchasePrice": 45000.00,\n    "purchaseDate": "2023-05-16",\n    "warrantyInYears": 2,\n    "warrantyExpireDate": "2025-05-16"\n}', {contentType: 'application/json'});
data.append('productPhoto', fs.createReadStream('/C:/Users/NSL/Pictures/desk-pc-header.png'));

var config = {
  method: 'post',
maxBodyLength: Infinity,
  url: `${Base_URL}/product-crud/products`,
  headers: { 
    'apiKey': api_key, 
    ...data.getHeaders()
  },
  data : data
};

axios(config)
.then(function (response) {
  console.log(JSON.stringify(response.data));
})
.catch(function (error) {
  console.log(error);
});
javascript reactjs axios multipartform-data form-data
1个回答
0
投票

尝试将数据对象的每个键值对单独附加到 formData:

for(let key in data){
  formData.append(key, data[key]);
}

也可以只传递整个配置对象,将 axios.post 更改为:

return axios.post(`${API_BASE_URL}/products`, formData, config);
© www.soinside.com 2019 - 2024. All rights reserved.