Question

我正在使用vuejs开发一个项目，并使用Axios处理我的AJAX请求，问题是我无法在formData中发送数组，我在开发人员面板的“网络”选项卡上的请求上看到了[object]。是否可以将带有对象数组的参数作为参数传递给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()方法将仅接受字符串或Blob。因此，当您传入任何类型的对象（数组，对象，函数...）时，该对象的.toString()方法将被强制立即运行。因此，对象的.toString()方法输出[Object object]，并将其存储在FormData对象中。

要解决此问题：

更改：

formData.append(e, data[e])

收件人：

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

您可能想测试data[e]是否首先不包含字符串。

话虽如此

在不必要的情况下使用FormData会遇到很多麻烦。如果允许，Axios可以自动（深度）解析对象。它也对FormData对象执行此操作，但是使所有这些操作变得过于复杂。

您应该考虑根本不使用FormData，而直接在Axios POST请求中直接发送data对象。

为此，您必须将编码更改为JSON，因为Axios的默认值为url-form-encoded

Answer 2

您可以像这样将其字符串化

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

并将其像在服务器端一样

JSON.parse(req.body.data)

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

2 个答案: