не может отправить массив внутри formData с помощью Axios

Question

Я работаю над проектом с vuejs, и для обработки моих запросов AJAX я использую Axios, проблема в том, что я не могу отправить массив внутри моей formData, я вижу [объект] по моему запросу во вкладке сети панели разработчиков.Можно ли передать в качестве параметра запрос POST с массивом объектов внутри основного объекта, такого типа: внутри моего объекта у меня есть массив с длиной 2, как показано ниже

  (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: {…}

Я пробовал JSON.stringy как для массива, так и для целого объекта, но я получаю метод 405 не допускается.Я также попытался добавить конфиг.Я вижу какое-то решение как paramsSerializer, но не могу понять, куда мне его написать.

   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();
    }
  });
},

в разделе заголовков внутри formData, я вижу свойства как объекты

  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>

Answer 1

Вы можете просто преобразовать его в строку

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

и получить его на стороне сервера, как

JSON.parse(req.body.data)

Answer 2

Пропуск синтаксических ошибок в предоставленном коде

Метод FormData.append() принимает только строку или BLOB-объект. Поэтому, когда вы передаете объект любого типа (Array, Object, Function ...), метод .toString() этого объекта принудительно запускается немедленно. Таким образом, метод .toString() объекта выдает [Object object], и он сохраняется в вашем FormData объекте.

Чтобы это исправить:

Изменение:

formData.append(e, data[e])

До:

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

вы можете проверить, если data[e] не содержит строку вначале.

С учетом сказанного

Вы сталкиваетесь с большими трудностями при использовании FormData, когда это просто не нужно. Axios предназначен для автоматического анализа ваших объектов (глубоко), если вы позволите. Это также происходит с объектами FormData, но вы все это слишком усложнили.

Вы должны вообще НЕ использовать FormData и просто отправить свой объект data прямо в запросе Axios POST.

Для этого вам придется изменить кодировку на JSON, потому что Axios по умолчанию url-form-encoded