javascript - can not send array inside formData with Axios - Stack Overflow

admin管理员组

文章数量:1312662

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>

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>

• javascript
• axios

Share Improve this question Follow edited Jun 1, 2019 at 18:29 Rasim AVCI asked Jun 1, 2019 at 18:24 Rasim AVCIRasim AVCI 14322 gold badges44 silver badges1212 bronze badges 1

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

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

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 overplicated 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

No String conversion is needed!

This: https://stackoverflow./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
})

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.

本文标签： javascriptcan not send array inside formData with AxiosStack Overflow