如何在Axios、Nuxt、Vue.js中向FormData追加数组对象？

FormData本身只支持扁平的键值对结构，没法直接处理嵌套对象或数组，所以得先把你的collection数据展开成后端能解析的格式（比如collection[0].name、collection[0].obj.id这种命名规则），再追加到FormData里。下面是具体实现方法：

1. 写一个数据转换工具函数 #

这个函数会递归遍历嵌套的对象和数组，把它们转换成FormData可接受的键值对：

function convertToFormData(data, formData = new FormData(), prefix = '') {
  // 处理数组
  if (Array.isArray(data)) {
    data.forEach((item, index) => {
      const newPrefix = prefix ? `${prefix}[${index}]` : `${index}`;
      convertToFormData(item, formData, newPrefix);
    });
  }
  // 处理对象
  else if (typeof data === 'object' && data !== null) {
    Object.keys(data).forEach(key => {
      const newPrefix = prefix ? `${prefix}.${key}` : key;
      convertToFormData(data[key], formData, newPrefix);
    });
  }
  // 处理普通值（字符串、数字等）
  else {
    formData.append(prefix, data);
  }
  return formData;
}

2. 在Vue.js组件中使用 #

在Vue组件的方法里，用这个工具函数把collection转成FormData，再用Axios发送请求：

<template>
  <button @click="submitData">提交数据</button>
</template>

<script>
import axios from 'axios';

export default {
  methods: {
    convertToFormData(data, formData = new FormData(), prefix = '') {
      if (Array.isArray(data)) {
        data.forEach((item, index) => {
          const newPrefix = prefix ? `${prefix}[${index}]` : `${index}`;
          convertToFormData(item, formData, newPrefix);
        });
      } else if (typeof data === 'object' && data !== null) {
        Object.keys(data).forEach(key => {
          const newPrefix = prefix ? `${prefix}.${key}` : key;
          convertToFormData(data[key], formData, newPrefix);
        });
      } else {
        formData.append(prefix, data);
      }
      return formData;
    },
    async submitData() {
      const collection = [{
        name: "tony",
        obj: { id: 1, code: "obj1", name: "john" },
        arr: [{ id: 1, code: "arr1", name: "john" }, { id: 2, code: "arr2", name: "john" }],
        address: "USA"
      }];

      // 转换为FormData
      const formData = this.convertToFormData(collection);

      try {
        const response = await axios.post('/your-api-url', formData);
        console.log('提交成功', response.data);
      } catch (error) {
        console.error('提交失败', error);
      }
    }
  }
}
</script>

3. 在Nuxt.js中使用 #

Nuxt里的用法和Vue类似，如果你用了Nuxt官方的Axios模块（@nuxtjs/axios），直接用this.$axios调用即可：

<template>
  <button @click="submitData">提交数据</button>
</template>

<script>
export default {
  methods: {
    convertToFormData(data, formData = new FormData(), prefix = '') {
      if (Array.isArray(data)) {
        data.forEach((item, index) => {
          const newPrefix = prefix ? `${prefix}[${index}]` : `${index}`;
          convertToFormData(item, formData, newPrefix);
        });
      } else if (typeof data === 'object' && data !== null) {
        Object.keys(data).forEach(key => {
          const newPrefix = prefix ? `${prefix}.${key}` : key;
          convertToFormData(data[key], formData, newPrefix);
        });
      } else {
        formData.append(prefix, data);
      }
      return formData;
    },
    async submitData() {
      const collection = [{
        name: "tony",
        obj: { id: 1, code: "obj1", name: "john" },
        arr: [{ id: 1, code: "arr1", name: "john" }, { id: 2, code: "arr2", name: "john" }],
        address: "USA"
      }];

      const formData = this.convertToFormData(collection);

      try {
        const response = await this.$axios.post('/your-api-url', formData);
        console.log('提交成功', response.data);
      } catch (error) {
        console.error('提交失败', error);
      }
    }
  }
}
</script>

注意事项 #

• 后端需要支持解析这种带索引和点的键名（比如collection[0].obj.id），大部分主流后端框架（如Laravel、Express）都能自动处理。
• 如果数据里包含文件，直接把File对象传给工具函数即可，它会自动追加到FormData里。

内容的提问来源于stack exchange，提问作者Richard