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?

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

• Error: Cannot find module ‘@babel/core’