Trying to post data using axios and formData but it's empty

Question

I'm using Vue3 and axios to post a form using FormData, but it's empty, nothing is being passed.

{"formData":{}}

Here's what I am doing:

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

axios.post("postform",  formData);

I also tried this:

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

and this:

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

But no success. There's no errors, it's just empty.

I retrieve them in PHP like this:

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

So my question is:

How do I post data using FormData?

try adding this print_r($_REQUEST) in php rather than echo $request->input("name"); and see what shows — Hello World
– Hello World, Commented Feb 24, 2021 at 11:21

Hello World · Accepted Answer · 2021-02-25 08:08:29Z

4

If you are not sending any file (or your form is not maltipart/form-data) you can use following method to send data through axios:

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

EDIT:

If you are sending any files then in my case following 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'
    }
})

edited Feb 25, 2021 at 8:08

answered Feb 24, 2021 at 11:26

Hello World

2,9277 gold badges33 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Thiago Guimarães Over a year ago

Thank you but I need to send files.

Hello World Over a year ago

@ThiagoGuimarães I have edited the answer please check

Thiago Guimarães Over a year ago

Doesn't work but thank you. It says getHeaders doesn't exist on type formData

Hello World Over a year ago

@ThiagoGuimarães i have edited the answer (added 'Content-Type': 'multipart/form-data') in headers. Try that

Thiago Guimarães Over a year ago

Thank you but I it was actually my fault. I had formData inside {} in axios. But I upvoted your answer for taking your time. Thank you once again

Usman Ejaz · Accepted Answer · 2021-02-24 12:12:55Z

3

You can convert your FormData Object to simple object and then send that object to server.

const formData = new FormData();
formData.set("key1", "value1");
formData.set("key2", "value2");

let data = {};

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

axios.post("postform",  data);

answered Feb 24, 2021 at 12:12

Usman Ejaz

584 bronze badges

2 Comments

Thiago Guimarães Over a year ago

Thank you. I will upvote because I could see the values but I'm still getting some errors when trying to pass the value to the key. Type 'FormDataEntryValue' is not assignable to type 'string'

piotr_cz Over a year ago

FormData entry value may be either string, null or File. Try formData.get('foobar').toString()

Otrebus · Accepted Answer · 2022-11-08 12:43:09Z

0

You might need to send the header 'Content-Length': formData.getLengthSync(). This call works for me:

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

edited Nov 8, 2022 at 12:43

answered Nov 7, 2022 at 21:18

Otrebus

11 silver badge2 bronze badges

Collectives™ on Stack Overflow

Trying to post data using axios and formData but it's empty

3 Answers 3

5 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related