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

u0njafvf  于 2022-12-12  发布在  iOS
关注(0)|答案(3)|浏览(216)

我正在处理一个项目与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>
kmpatx3s

kmpatx3s1#

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

FormData.append()方法只接受String或Blob。因此,当你传入任何类型的对象(Array、Object、Function...)时,该对象的.toString()方法都会被强制立即运行。因此,Object的.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

gmol1639

gmol16392#

更改:

formData.append(e, data[e])

收件人:

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

在服务器端,你会得到json字符串中的数据,所以你可以使用以下方法将其转换为对象:

JSON.parse(req.body.data);

这就是发送数组数据的方法。

pepwfjgg

pepwfjgg3#

不需要字符串转换!
这个:https://stackoverflow.com/a/68842393/4759176的回答帮了我的忙:
为了发送formdata中的数组,您必须运行一个循环并传递如下所示的值:
第一个

相关问题