Axios post请求发送表单数据

axios POST请求击中控制器上的url，但将空值设置为我的POJO类，当我在chrome中通过开发人员工具时，有效载荷包含数据。我做错了什么?

Axios POST请求

var body = {
    userName: 'Fred',
    userEmail: 'Flintstone@gmail.com'
}

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'
}

请求抛出错误

在发布多部分/表单数据时出错。内容类型报头缺少边界

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

有人能解释如何设置边界或如何使用axios发送表单数据吗?

当前回答

我还需要计算内容的长度

const formHeaders = form.getHeaders();
formHeaders["Content-Length"] = form.getLengthSync()

const config = {headers: formHeaders}

return axios.post(url, form, config)
.then(res => {
    console.log(`form uploaded`)
})

2021-02-05 21:31:44

其他回答

检查querystring。

你可以这样使用它:

var querystring = require('querystring');
axios.post('http://something.com/', querystring.stringify({ foo: 'bar' }));

2018-08-02 07:59:40

import axios from "axios";
import qs from "qs";   

const url = "https://yourapplicationbaseurl/api/user/authenticate";
    let data = {
      Email: "testuser@gmail.com",
      Password: "Admin@123"
    };
    let options = {
      method: "POST",
      headers: { "content-type": "application/x-www-form-urlencoded" },
      data: qs.stringify(data),
      url
    };
    axios(options)
      .then(res => {
        console.log("yeh we have", res.data);
      })
      .catch(er => {
        console.log("no data sorry ", er);
      });
  };

2020-06-18 17:45:03

上传(多个)二进制文件

node . js

当您想通过多部分/form-data发布文件时，事情就变得复杂了，尤其是多个二进制文件。下面是一个工作示例:

const FormData = require('form-data')
const fs = require('fs')
const path = require('path')

const formData = new FormData()
formData.append('files[]', JSON.stringify({ to: [{ phoneNumber: process.env.RINGCENTRAL_RECEIVER }] }), 'test.json')
formData.append('files[]', fs.createReadStream(path.join(__dirname, 'test.png')), 'test.png')
await rc.post('/restapi/v1.0/account/~/extension/~/fax', formData, {
  headers: formData.getHeaders()
})

而不是头:{'Content-Type': 'multipart/form-data'}我更喜欢头:formData.getHeaders() 我在上面使用了async和await，如果你不喜欢它们，你可以将它们更改为简单的Promise语句为了添加你自己的头文件，你只需要头文件:{…formData.getHeaders()}

新增内容如下:

浏览器

浏览器的FormData不同于NPM包form-data。以下代码在浏览器中为我工作:

HTML:

<input type="file" id="image" accept="image/png"/>

JavaScript:

const formData = new FormData()

// add a non-binary file
formData.append('files[]', new Blob(['{"hello": "world"}'], { type: 'application/json' }), 'request.json')

// add a binary file
const element = document.getElementById('image')
const file = element.files[0]
formData.append('files[]', file, file.name)
await rc.post('/restapi/v1.0/account/~/extension/~/fax', formData)

2018-05-23 07:07:16

我在使用带有axios的FormData对https://apps.dev.microsoft.com服务进行调用时遇到了类似的问题，它错误地显示出“请求体必须包含以下参数:'grant_type'”

重新格式化后的数据

{
  grant_type: 'client_credentials',
  id: '123',
  secret: '456789'
}

"grant_type=client_credentials&id=123&secret=456789"

下面的代码起作用了:

const config: AxiosRequestConfig = {
    method: 'post',
    url: https://apps.dev.microsoft.com/auth,
    data: 'grant_type=client_credentials&id=123&secret=456789',
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
    }
};

axios(config)
.then(function (response) {
  console.log(JSON.stringify(response.data));
})
.catch(function (error) {
  console.log(error);
});

2021-10-28 21:02:19

你可以通过使用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);
  });

Axios post请求发送表单数据

推荐文章

最新文章

标签