can not send array inside formData with Axios

Question

I am working on a project with vuejs and to handle my AJAX requests I use Axios, the problem is I can not send array inside my formData, I see [object] on my request in network tab of developers panel. Is it possible to pass as a parameter to a POST request with an array of objects inside main object, of this type: inside my object I have an array with lenght 2 as below

  (3) [{…}, {…}, {…}, __ob__: Observer]
  0:
  created_at: "2018-12-16 18:37:00"
  id: 1
  properties: Array(8)
  0: {…}
  1: {…}
  2: {…}
  3: {…}
  4: {…}
  5: {…}
  6: {…}
  7: {…}
  title: "Building properties"
  updated_at: "2018-12-16 18:37:00"
 __proto__: Object
 1: {…}
 2: {…}

I tried JSON.stringy both for array and whole object but I get 405 method not allowed. I also tried adding config. I see some solution as paramsSerializer but can not understand where I should write it exactly.

   var data = {
    user_id: this.user_info,
    type_id: this.dorm_type,
    city_id: this.city,
    district_id: this.district,
    is_active: this.is_active,
    name: this.name,
    slug: this.slug,
    keywords: this.keywords,
    description: this.description,
    member: this.member,
    capacity: this.capacity,
    is_wifi: this.is_wifi,
    meal: this.meal,
    properties: this.properties

 const formData = new FormData();
  Object.keys(data).map(e => {
    formData.append(e, data[e]);
  });
  for (let i = 0; i < this.images.length; i++) {
    formData.append("images[]", this.images[i]);
  }
  for (let i = 0; i < this.props.length; i++) {
    formData.append("props[]", this.props[i]);
  }
  for (let i = 0; i < this.university.length; i++) {
    formData.append("university[]", this.university[i]);
  }
  formData.append("_method", "PUT");
  if (this.logo) {
    formData.append("logo", this.logo);
  }
  if (this.cover) {
    formData.append("cover", this.cover);
  }
  console.log(formData);
  this.$Progress.start();
  //this.axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
  this.axios.post("dorms/" + this.id, formData).then(response => {
    console.log(response.data);
    if (response.status == 200) {
      this.$Progress.finish();
    }
  });
},

in headers section inside formData, I see properties as objects

  member: null
  capacity: 28
  is_wifi: 0
  meal: 0
  properties: [object Object],[object Object],[object Object]
  content: <p>null</p>
  content_en: <p>Under Construction</p>

Is this the real code? I ask because the data object syntax is not correct. There is a dangling closing }. — Randy Casburn
– Randy Casburn, Commented Jun 1, 2019 at 18:49

Randy Casburn · Accepted Answer · 2019-06-01 19:00:36Z

Overlooking the syntax errors in the provided code

The FormData.append() method will only accept a String or Blob. So when you pass in an object of any type (Array, Object, Function...) the .toString() method of that object is forced to run immediately. So, an Object's .toString() method outputs [Object object] and that gets stored in your FormData object.

To fix that:

Change:

formData.append(e, data[e])

To:

formData.append(e, JSON.stringify(data[e]))

you may want to test if data[e] doesn't contain a string first.

With that said

You go to a great deal of trouble to use FormData when it is just not necessary. Axios is designed to parse your Objects (deeply) automatically if you let it. It does that with FormData objects too, but you overcomplicated all of this.

You should consider NOT using FormData at all and simply send your data object directly in the Axios POST request.

To do that you will have to change the encoding to JSON because Axios default is url-form-encoded

parsecer · Accepted Answer · 2022-12-05 20:18:33Z

2

No String conversion is needed!

This: https://stackoverflow.com/a/68842393/4759176 answer helped me:

In order to send array in formdata you have to run a loop and pass values like this:

const array = [1,2,3,4,5,6];

const formData = new FormData();

array.forEach(function(value) {
  formData.append("id[]", value) // you have to add array symbol after the key name
})

answered Dec 5, 2022 at 20:18

parsecer

5,23920 gold badges86 silver badges171 bronze badges

Comments

blaze-centurion · Accepted Answer · 2022-03-06 04:58:14Z

0

Change:

formData.append(e, data[e])

To:

formData.append(e, JSON.stringfy(data))

And in server side you will get the data in json string. So you can convert it into object by using:

JSON.parse(req.body.data);

And that's how you can send the array data.

answered Mar 6, 2022 at 4:58

blaze-centurion

754 bronze badges

Collectives™ on Stack Overflow

can not send array inside formData with Axios

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related