Question

我正在使用 axios，我的后端是 laravel/php。我应该像这样发送一个 form-data：

national_id:123
social_media[0][social_id]:1
social_media[0][username]:myuser

我的数据：

       var social_media = []

        let newSocial = {
            "social_id": 1,
            "username": myuser
        }            
        social_media.push(newSocial)

    const data = {
        "national_id": national_id,
        "social_media": social_media,
        "image":image
    }

我的 axios 帖子：

  updateUser = (data) => {
    const headers = {
        'content-type': 'multipart/form-data'
    }
    let formData = new FormData();
    for ( var key in data ) {
        formData.append(key, data[key]);
    }

    return this.init(headers).post("/users/"+data.user_id, formData);
  };

但我收到此错误：

errors: {social_media: ["The social media must be an array."]}
message: "The given data was invalid."

我的网络标签：

national_id: 123
social_media: [object Object]

Answer 1

如果不查看服务器用于解码数据的代码，就很难判断。

但是，假设无法访问服务器代码，我首先要尝试将数组编码为 JSON 字符串：

改变这个：

  const data = {
        "national_id": national_id,
        "social_media": social_media,
        "image":image
    }

为此：

  const data = {
        "national_id": national_id,
        "social_media": JSON.stringify(social_media),
        "image":image
    }

Answer 2

既然是发送数组，根据https://developer.mozilla.org/en-US/docs/Web/API/FormData/append，可以发送多个同名值：

formData.append('userpic[]', myFileInput.files[0], 'chris1.jpg');
formData.append('userpic[]', myFileInput.files[1], 'chris2.jpg');

此外，您可能需要使用 JSON.stringify 对对象进行字符串化。

所以对于你的情况，你可以做这样的事情

let formData = new FormData();
for (var key in data) {
  if (Array.isArray(data[key])) {
    for (var i = 0; i < data[key].length; i++) {
      formData.append(`${key}[]`, JSON.stringify(data[key][i]));
    }
  } else {
    formData.append(key, data[key]);
  }
}

如何使用 axios 将数组发送到服务器

2 个答案: