On the frontend side of web development, one of the most frequent tasks we perform is sending requests to a web server. Making a new Facebook post, adding a new Instagram photo, sending a tweet, or checking in and creating an account on a new website all involve requests being made to a server. We will learn How to Use Axios POST Request to Send Form Data in this guide. So, let us learn more about this without wasting any further time.

What is Axio POST Request?

Axios is an open source package that enables us to submit all of these requests by offering the POST HTTP client method, which is based on promises. We’ll discover how to use the Axios POST function in this tutorial with both plain old JavaScript and a framework like React. In browsers and Node.js, the Axios library sends asynchronous HTTP requests to REST endpoints. Axios allows users to benefit from JavaScript’s async and await because it is a lightweight HTTP client for both Node.js and browsers. Axios and the native JavaScript Fetch API are fairly comparable. There are numerous methods available, including POST, PATCH, PUT, DELETE, GET, and others. However, we will solely examine the POST technique in this post.

How to Use Axios POST Request to Send Form Data

1) Create a variable called bodyFormData with FormData()

To use Axios POST Request to send form data, first you need to create a variable called bodyFormData with FormData(). You can then utilize this bodyFormData in your axios post request data by simply appending your form data to it as follows: bodyFormData.append(‘userName’,’milan’). Here is one of our examples. Look at it to understand more about this method.

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

2) Utilize FormData()

Another solution to use Axios POST Request to send form data is utilizing FormData(). It helps you to post axios data. Run this command to do that:

var bodyFormData = new FormData();

Let’s add the fields to the form you want to send after that:

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

Consider using if you’re uploading photos. append.

bodyFormData.append('image', imageFile);

Finally you can then employ the axios post method (You can amend it accordingly) as the below:

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

3) Another Header Example

Another Header Example also can help you in this case. Look at the following example:

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

We hope you will enjoy our blog about How to Use Axios POST Request to Send Form Data. If you have any other questions or concerns about this issue, please leave a comment below. Thank you for reading; we are always excited when one of our posts can provide useful information on a topic like this!

Read more

→ How to solve the error “FormData.append(“key”, “value”) is not working”