axios发送表单数据的请求

时间:2017-12-04 09:29:58

标签: reactjs react-redux axios ajaxform axios-cookiejar-support

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);
});

浏览器响应:

enter image description here

如果我将标题设置为:

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

请求抛出错误

  

发布multipart / form-data时出错。 Content-Type标头缺少边界

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

任何人都可以解释如何设置边界或如何使用axios发送表单数据。

12 个答案:

答案 0 :(得分:145)

您可以使用FormData()发布axios数据,如:

var bodyFormData = new FormData();

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

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

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

bodyFormData.append('image', imageFile); 

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

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

您可以阅读更多Here

答案 1 :(得分:11)

对于我来说,我必须将边界添加到标头,如下所示:

user.emails[i].verified

如果您正在使用React Native,则此解决方案也很有用。

答案 2 :(得分:9)

签出querystring

您可以按以下方式使用它:

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

答案 3 :(得分:7)

2020 ES6的工作方式

在html中有表单,我像这样绑定数据:

数据:

form: {
   name: 'Joan Cap de porc',
   email: 'fake@email.com',
   phone: 2323,
   query: 'cap d\ou'
   file: null,
   legal: false
},

onSubmit:

async submitForm() {
  const formData = new FormData()
  Object.keys(this.form).forEach((key) => {
    formData.append(key, this.form[key])
  })

  try {
    await this.$axios.post('/ajax/contact/contact-us', formData)
    this.$emit('formSent')
  } catch (err) {
    this.errors.push('form_error')
  }
}

答案 4 :(得分:5)

上传(多个)二进制文件

当您想通过multipart/form-data发布文件时,事情会变得复杂,特别是多个二进制文件。以下是一个工作示例:

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

const formData = new FormData()
formData.append('json', JSON.stringify({ to: [{ phoneNumber: process.env.RINGCENTRAL_RECEIVER }] }), 'test.json')
formData.append('attachment', fs.createReadStream(path.join(__dirname, 'test.png')), 'test.png')
formData.pipe(concat({ encoding: 'buffer' }, async data => {
  const r = await rc.post('/restapi/v1.0/account/~/extension/~/fax', data, {
    headers: formData.getHeaders()
  })
  console.log(r.data)
}))
  • 而不是headers: {'Content-Type': 'multipart/form-data' }我更喜欢headers: formData.getHeaders()
  • 我需要使用concat-stream来连接多个文件流
  • 我使用上面的asyncawait,如果您不喜欢,可以将它们更改为简单的Promise语句

答案 5 :(得分:3)

在axios中使用application / x-www-form-urlencoded格式

默认情况下,axios将JavaScript对象序列化为JSON。发送数据 改为使用application / x-www-form-urlencoded格式,您可以使用 以下选项之一。

浏览器

在浏览器中,您可以如下使用URLSearchParams API:

const params = new URLSearchParams();

params.append('param1','value1');

params.append('param2','value2');

axios.post('/ foo',params);

请注意,并非所有浏览器都支持URLSearchParams(请参见caniuse.com),但是有可用的polyfill(确保对全局环境进行polyfill)。

或者,您可以使用qs库对数据进行编码:

const qs = require('qs');

axios.post('/ foo',qs.stringify({'bar':123}));

或以其他方式(ES6),

从“ qs”导入qs;

const data = {'bar':123};

const选项= {

方法:“ POST”,

标题:{'content-type':'application / x-www-form-urlencoded'},

数据:qs.stringify(data),

url,};

axios(options);

答案 6 :(得分:2)

更直接:

axios.post('/addUser',{
    userName: 'Fred',
    userEmail: 'Flintstone@gmail.com'
})
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});

答案 7 :(得分:1)

上面的方法对我有用,但是由于这是我经常需要的东西,因此我对平面对象使用了一种基本方法。注意,我也在使用Vue而不是REACT

packageData: (data) => {
  const form = new FormData()
  for ( const key in data ) {
    form.append(key, data[key]);
  }
  return form
}

在为我工作之前,我遇到了带有嵌套对象和文件的更复杂的数据结构,然后将其放到下面

packageData: (obj, form, namespace) => {
  for(const property in obj) {
    // if form is passed in through recursion assign otherwise create new
    const formData = form || new FormData()
    let formKey

    if(obj.hasOwnProperty(property)) {
      if(namespace) {
        formKey = namespace + '[' + property + ']';
      } else {
        formKey = property;
      }

      // if the property is an object, but not a File, use recursion.
      if(typeof obj[property] === 'object' && !(obj[property] instanceof File)) {
        objectToFormData(obj[property], formData, property);
      } else {
        // if it's a string or a File
      formData.append(formKey, obj[property]);
      }
    }
  }
  return formData;
}

答案 8 :(得分:1)

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);
      });
  };

答案 9 :(得分:1)

我还需要计算内容长度

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`)
})

答案 10 :(得分:0)

就我而言,问题在于 FormData 追加操作的格式需要填写额外的“选项”参数来定义文件名:

var formData = new FormData();
formData.append(fieldName, fileBuffer, {filename: originalName});

我看到很多抱怨说 axios 坏了,但实际上根本原因不是正确使用表单数据。我的版本是:

"axios": "^0.21.1",
"form-data": "^3.0.0",

在接收端,我用 multer 处理这个,最初的问题是文件数组没有被填充 - 我总是收到一个没有从流中解析文件的请求。

另外,需要传入axios请求中设置的form-data header:

        const response = await axios.post(getBackendURL() + '/api/Documents/' + userId + '/createDocument', formData, {
        headers: formData.getHeaders()
    });

我的整个函数如下所示:

async function uploadDocumentTransaction(userId, fileBuffer, fieldName, originalName) {
    var formData = new FormData();
    formData.append(fieldName, fileBuffer, {filename: originalName});

    try {
        const response = await axios.post(
            getBackendURL() + '/api/Documents/' + userId + '/createDocument',
            formData,
            {
                headers: formData.getHeaders()
            }
        );

        return response;
    } catch (err) {
        // error handling
    }
}

“fieldName”的值并不重要,除非您有一些需要它的接收端处理。

答案 11 :(得分:0)

https://www.npmjs.com/package/axios

它的工作

// "content-type": "application/x-www-form-urlencoded", // 提交这个

import axios from 'axios';

let requestData = {
      username : "abc@gmail.cm",
      password: "123456"
    };
   
    const url = "Your Url Paste Here";

    let options = {
      method: "POST",
      headers: { 
        'Content-type': 'application/json; charset=UTF-8',

        Authorization: 'Bearer ' + "your token Paste Here",
      },
      data: JSON.stringify(requestData),
      url
    };
    axios(options)
      .then(response => {
        console.log("K_____ res :- ", response);
        console.log("K_____ res status:- ", response.status);
      })
      .catch(error => {
        console.log("K_____ error :- ", error);
      });

获取请求

fetch(url, {
    method: 'POST',
    body: JSON.stringify(requestPayload),           
    headers: {
        'Content-type': 'application/json; charset=UTF-8',
        Authorization: 'Bearer ' + token,
    },
})
    // .then((response) => response.json()) .  // commit out this part if response body is empty
    .then((json) => {
        console.log("response :- ", json);
    }).catch((error)=>{
        console.log("Api call error ", error.message);
        alert(error.message);
});