close

How to Use Axios POST Request to Send Form Data in ReactJS?

Hello Guys, Today In this Tutorial We Are Going To learn about How to Use Axios POST Request to Send Form Data in ReactJS? When We Work With APIs We Need to Use GET, POST, PUT, DELETE request So Today We are going to Use POST requests with body form-data in Axios. Let’s get Start this tutorial.

How to Use Axios POST Request to Send Form Data in ReactJS?

  1. How To Use Axios POST Request to Send Form Data in ReactJS?

    To Use Axios POST Request to Send Form Data in ReactJS First Of all, make a variable named bodyFormData with FormData(). Then You can simply append your form data in bodyFormData just like this: bodyFormData.append('userName', 'milan'); and then you can simply use this bodyFormData in your axios post request data. Here is my example.

  2. Use Axios POST Request to Send Form Data in ReactJS

    To Use Axios POST Request to Send Form Data in ReactJS First Of all, make a variable named bodyFormData with FormData(). Then You can simply append your form data in bodyFormData just like this: bodyFormData.append('userName', 'milan'); and then you can simply use this bodyFormData in your axios post request data. Here is my example.

Method 1: Use This Example

First Of all, make a variable named bodyFormData with FormData(). Then You can simply append your form data in bodyFormData just like this: bodyFormData.append(‘userName’, ‘milan’); and then you can simply use this bodyFormData in your axios post request data. Here is my example.

var bodyFormData = new FormData();
bodyFormData.append('userName', 'milan');
bodyFormData.append('image', imageFile); 

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

Method 2: Another Example With Header

const form = new FormData();
form.append('userName', 'milan');

const response = await axios({
    method: 'post',
    url: 'your_api_url',
    data: form,
    headers: {
        'Content-Type': `multipart/form-data`,
    },
});

Conclusion

It’s all About this Tutorial. Hope This Tutorial is Helped You. Comment below Your thoughts and your queries. Also, Comment below which Method worked for you? Thank You.

Also, Read

2 thoughts on “How to Use Axios POST Request to Send Form Data in ReactJS?”

Leave a Comment