How to send formData object as key value pair in Vue js?

Question

I am trying to upload an image with vue and laravel on backend. Everything was going well until I ran into a problem. My image gets sent when i make an axios call sending formData only as an argument.

 let formData = new FormData();
 formData.append("image", this.image);
 axios.post('url',formData)

But on axios request I want to send an object, not just the formData, something like this:

const myObj={ name:'hello','shop_id':2, image:formData }
axios.post('url',myObj)

But this doesn't work. Is there any way I can work around with this?

Emiel Zuurbier · Accepted Answer · 2020-08-29 15:37:39Z

1

Add the name and shop_id values to the FormData object. In this case FormData is the container in which you can send all of your data.

let formData = new FormData();
formData.append('image', this.image);
formData.append('name', 'hello');
formData.append('shop_id', 2);
axios.post('url',formData)

If your data becomes more complex and you need to send a big object with loads of data, then you could send the the object as a JSON value in one of the keys.

const complexObject = {
  ...loads of data here
};

formData.append('complexObject', JSON.stringify(complexObject))

Parse the JSON back to usable code on the server side to use the data inside the complex object.

edited Aug 29, 2020 at 15:37

answered Aug 29, 2020 at 15:05

Emiel Zuurbier

21.2k3 gold badges25 silver badges36 bronze badges

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

2 Comments

gitam gadtaula Over a year ago

Thank you. I feel so stupid I didn't think about this. You are a life saver :)

Emiel Zuurbier Over a year ago

I've added an example how to just do that.

Collectives™ on Stack Overflow

How to send formData object as key value pair in Vue js?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related