无法使用 Axios 在 formData 内发送数组

Question

我正在使用 vuejs 开发一个项目，并使用 Axios 处理我的 AJAX 请求，问题是我无法在 formData 内发送数组，我在开发人员面板的网络选项卡中看到我的请求上的 [object]。是否可以将主对象内的对象数组作为参数传递给 POST 请求，这种类型：在我的对象内，我有一个长度为 2 的数组，如下所示

\n\n

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

\n\n

我尝试了 JSON.stringy 来处理数组和整个对象，但我得到 405 method not allowed。我也尝试添加配置。我看到一些解决方案作为 paramsSerializer 但无法理解我应该在哪里准确地编写它。

\n\n

   var data = {\n    user_id: this.user_info,\n    type_id: this.dorm_type,\n    city_id: this.city,\n    district_id: this.district,\n    is_active: this.is_active,\n    name: this.name,\n    slug: this.slug,\n    keywords: this.keywords,\n    description: this.description,\n    member: this.member,\n    capacity: this.capacity,\n    is_wifi: this.is_wifi,\n    meal: this.meal,\n    properties: this.properties\n\n const formData = new FormData();\n  Object.keys(data).map(e => {\n    formData.append(e, data[e]);\n  });\n  for (let i = 0; i < this.images.length; i++) {\n    formData.append("images[]", this.images[i]);\n  }\n  for (let i = 0; i < this.props.length; i++) {\n    formData.append("props[]", this.props[i]);\n  }\n  for (let i = 0; i < this.university.length; i++) {\n    formData.append("university[]", this.university[i]);\n  }\n  formData.append("_method", "PUT");\n  if (this.logo) {\n    formData.append("logo", this.logo);\n  }\n  if (this.cover) {\n    formData.append("cover", this.cover);\n  }\n  console.log(formData);\n  this.$Progress.start();\n  //this.axios.defaults.headers.post[\'Content-Type\'] = \'application/x-www-form-urlencoded\';\n  this.axios.post("dorms/" + this.id, formData).then(response => {\n    console.log(response.data);\n    if (response.status == 200) {\n      this.$Progress.finish();\n    }\n  });\n},\n

\n\n

在 formData 内的标题部分，我将属性视为对象

\n\n

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

\n

Answer 1

忽略所提供代码中的语法错误

该FormData.append()方法仅接受 String 或 Blob。因此，当您传入任何类型的对象（数组、对象、函数...）时，.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