使用 axios 将 FormData 从 ReactJs 发送到 NodeJs 控制器答案

【问题标题】：Sending FormData from ReactJs to NodeJs controller using axios使用 axios 将 FormData 从 ReactJs 发送到 NodeJs 控制器
【发布时间】：2022-01-02 15:01:06
【问题描述】：

我有以下格式的 JS 对象，我想在后端发送。我已经实现了一些代码，但在 nodeJs 控制器上它说hotel is undefined。我的书面代码如下：

let hotel = new FormData();
hotel.append('name', data.append);
hotel.append('slug', data.slug);
hotel.append('logo', data.logo);
hotel.append('coverAvatar', data.coverAvatar);
hotel.append('designs', [{ name: `${+new Date()}`, url: localStorage.getItem('initialDesign') }])
hotel.append('products', [...selectedVariants]);

axios.post(`${baseURL}/hotel`, { hotel },{
  headers: {
    'Authorization': localStorage.getItem('_AUTH_TOKEN'),
    'Content-Type': 'multipart/form-data'
  }})
  .then(response => {
    console.log({ response });
  })
  .catch(err => {
    console.log('err', err);
  })

我正在使用 multipart/form-data 因为 logo 和 coverAvatar 是 <input type='file' /> 的输出

我的数据格式

{
  "name": "preshan hotel 2",
  "logo": {file},
  "coverAvatar": {file},
  "romms": [{
    "name": "tempDesign",
    "url": "https://picsum.photos/600/800"
  }], 
  "facilities": [
    { "facilityId": "61ceb3931b1b68fe90827f23", "facilityMappings": ["61ceb39b1b1b68fe90827f2c", "61ceb39b1b1b68fe90827f41"] },
    { "facilityId": "61ceb3ca1b1b68fe90827f47", "facilityMappings": ["61ceb3ca1b1b68fe90827f50","61ceb3ca1b1b68fe90827f58", "61ceb3ca1b1b68fe90827f56"] },
    { "facilityId": "61ceb3e41b1b68fe90827f5d", "facilityMappings": ["61ceb3e41b1b68fe90827f5f"]}
  ]
}

【问题讨论】：

您必须在后端使用 multer 或强大的方式处理多部分表单。
@UmerAbbas。这是问题中的错字 - 不是代码 - 感谢您的指点。现在修复
@ABDULLOKHMUKHAMMADJONOV 你能举个例子吗
@ABDULLOKHMUKHAMMADJONOV 我是否正确发送数据？
[npmjs.com/package/multer]这个页面展示了必要的例子

标签： javascript node.js reactjs axios

【解决方案1】：

你应该直接传递你的表单数据而不是传递一个对象。

在您的示例中，它看起来像这样：

...
axios.post(`${baseURL}/hotel`, hotel,{
...

【讨论】：