Struggling to send information through axios with formData, but it appears to be devoid of content

Question

Struggling to send information through axios with formData, but it appears to be devoid of content

I'm currently working with Vue3 and axios to submit a form using FormData. However, I am facing an issue where the form data is empty and not being passed.

{"formData":{}}

Here's my code snippet:

const formData= new FormData();
formData.set("name", name);

axios.post("postform",  formData);

I have also attempted the following approaches:

formData.set("name", "John Doe");
axios.post("postform",  formData);

and this:

formData.append("name", "John Doe");
axios.post("postform",  formData);

Unfortunately, none of these methods have worked for me. There are no errors displayed, but the form data remains empty.

In my PHP code, I retrieve the data like this:

 echo $request->input("name");

Therefore, my main inquiry is:

How can I successfully post data utilizing FormData?

javascript vue.js axios form-data

Answer 1

Answer №1

When not sending a file or using multipart/form-data in your form, you can utilize the following approach to send data via axios:

let formData = {};
formData.name =  "John Doe";
axios({
  url: "postform",
  method: "POST",
  data: formData
});

UPDATE:

If files are being sent, this method worked for me:


const formData = new FormData();
formData.append("name", "hello world");



axios({
    url: 'postform',
    method: "POST",
    data: formData,
    headers: {
      'Content-Type': 'multipart/form-data'
    }
})

Answer 2

When not sending a file or using multipart/form-data in your form, you can utilize the following approach to send data via axios:

let formData = {};
formData.name =  "John Doe";
axios({
  url: "postform",
  method: "POST",
  data: formData
});

UPDATE:

If files are being sent, this method worked for me:


const formData = new FormData();
formData.append("name", "hello world");



axios({
    url: 'postform',
    method: "POST",
    data: formData,
    headers: {
      'Content-Type': 'multipart/form-data'
    }
})

Answer 3

Answer №2

If you have a FormData Object, you can easily transform it into a simple object and then transmit that data to the server.

const formData = new FormData();
formData.set("username", "johndoe");
formData.set("email", "johndoe@example.com");

let userData = {};

// iterate through the key/value pairs
for(var pair of formData.entries()) {
    userData[pair[0]] = pair[1];
}

axios.post("submitdata",  userData);

Answer 4

If you have a FormData Object, you can easily transform it into a simple object and then transmit that data to the server.

const formData = new FormData();
formData.set("username", "johndoe");
formData.set("email", "johndoe@example.com");

let userData = {};

// iterate through the key/value pairs
for(var pair of formData.entries()) {
    userData[pair[0]] = pair[1];
}

axios.post("submitdata",  userData);

Answer 5

Answer №3

To ensure the correct data is sent, consider including the 'Content-Length' header with the value of formData.getLengthSync(). An example of implementing this would be:

const reply = await axios.delete(url, {
  "data": formData,
  "headers": {
    "Content-Length": formData.getLengthSync()
  }
});

Answer 6

To ensure the correct data is sent, consider including the 'Content-Length' header with the value of formData.getLengthSync(). An example of implementing this would be:

const reply = await axios.delete(url, {
  "data": formData,
  "headers": {
    "Content-Length": formData.getLengthSync()
  }
});

Struggling to send information through axios with formData, but it appears to be devoid of content

Answer №1

Answer №2

Answer №3

Similar questions

Leveraging the power of the babel standalone tool to utilize imports in

Conceal javascript within php

Is there a way to programmatically generate a component instance in Vue 3?

Monitoring the initiation and completion of web requests within the Ionic framework

Combining two functions in JavaScript to target the same div: a simple guide

"Stellar.js fails to function properly when applied to elements loaded dynamically through AJAX requests

Overlooking errors in RxJs observables when using Node JS SSE and sharing a subscription

Tips for keeping a video background stationary while allowing the text to move smoothly

Select state and city options similar to the national breakdown page

Can you add a variable to a string once the string has already been formed?

What methods can I use to modify strings within JSX?

Tips for confirming date is earlier than current date in Reactjs?

What is causing this code to keep iterating endlessly?

No cookie found in the system

Extending the rules and requirements of VInput

Issue with jQuery .on('change') function not functioning correctly following a row being duplicated

Transforming a file with a node module that lacks a .js class into a browseable format

Stop all file uploads using jQuery

Form an array using the values that are returned

Tips for sending push notifications to multiple devices via Firebase Cloud Messaging