axios post请求发送表单数据

Question

axios POST 请求正在访问控制器上的 url，但将 null 值设置为我的 POJO 类，当我在 chrome 中浏览开发人员工具时，有效负载包含数据。我究竟做错了什么？

Axios POST 请求：

var body = {
    userName: 'Fred',
    userEmail: '[e-mail]'
}

axios({
    method: 'post',
    url: '/addUser',
    data: body
})
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});

浏览器响应：

如果我将标题设置为：

headers:{
  Content-Type:'multipart/form-data'
}

请求抛出错误

发布多部分/表单数据时出错。 Content-Type 标头缺少边界

如果我在邮递员中提出相同的请求，它工作正常并将值设置为我的 POJO 类。

谁能解释如何设置边界或如何使用 axios 发送表单数据。

原文由 Srikanth Gowda 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用 FormData() 发布 axios 数据，例如：

var bodyFormData = new FormData();

然后将字段添加到您要发送的表单中：

bodyFormData.append('userName', 'Fred');

如果您要上传图片，您可能需要使用 .append

bodyFormData.append('image', imageFile);

然后你可以使用 axios post 方法（你可以相应地修改它）

axios({
  method: "post",
  url: "myurl",
  data: bodyFormData,
  headers: { "Content-Type": "multipart/form-data" },
})
  .then(function (response) {
    //handle success
    console.log(response);
  })
  .catch(function (response) {
    //handle error
    console.log(response);
  });

相关的 GitHub 问题：

无法使用 ‘Content-Type’: ‘multipart/form-data’ 获得 .post 以工作 @ axios/axios

原文由 Aaqib 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

在我的例子中，我必须将 边界 添加到 标题 中，如下所示：

 const form = new FormData();
form.append(item.name, fs.createReadStream(pathToFile));

const response = await axios({
    method: 'post',
    url: 'http://www.yourserver.com/upload',
    data: form,
    headers: {
        'Content-Type': `multipart/form-data; boundary=${form._boundary}`,
    },
});

如果您使用的是 React Native，此解决方案也很有用。

原文由 Luiz Dias 发布，翻译遵循 CC BY-SA 4.0 许可协议