如何通过Multipart/Form-Data发送含数组项的表单及文件？

问题核心 #

你遇到的错误源于三个关键问题：

1. 数组传递格式与后端API期望不匹配，直接传递JSON字符串无法被解析；
2. File对象被错误转为String，导致文件内容丢失；
3. 手动设置multipart/form-data请求头，丢失了axios自动添加的boundary分隔符，后端无法正确解析表单结构。

修复方案 #

1. 正确处理File对象 #

直接将File对象追加到FormData，无需转成String：

const formData = new FormData();
if (data.file) {
  formData.append('dwg', data.file);
}

2. 调整数组ITPS的传递方式 #

根据后端API的接收规则，选择以下两种方式之一：

方式A：重复键名传递数组项（多数后端框架支持）

如果后端期望同一个键名对应多个数组项，循环数组逐个追加：

if (items && Array.isArray(items)) {
  items.forEach(item => {
    // 若后端期望每个数组项是独立JSON字符串
    formData.append('ITPS', JSON.stringify(item));
    
    // 若后端期望展开数组项属性（如ITPS[0].name格式），替换为以下代码：
    // Object.entries(item).forEach(([key, value]) => {
    //   formData.append(`ITPS[${index}].${key}`, String(value));
    // });
  });
}

方式B：确保JSON字符串正确传递（仅限后端明确支持JSON格式的情况）

先在控制台打印JSON.stringify(items)，确认输出为有效JSON字符串。然后移除手动设置的请求头，让axios自动处理multipart/form-data（包含boundary）：

// 移除headers中的Content-Type配置
await apiForm.post(`${typeForm}`, formData);

3. 完整修复代码示例 #

const formData = new FormData();

// 处理文件
if (data.file) {
  formData.append('dwg', data.file);
}

// 处理普通字段
if (voltage) {
  formData.append('TENSAO', String(voltage));
}
if (projectName) {
  formData.append('ORC_NOME', projectName);
}
if (projectId) {
  formData.append('PRJ_ID', projectId);
}

// 处理数组ITPS（以方式A为例）
if (items && Array.isArray(items)) {
  items.forEach(item => {
    formData.append('ITPS', JSON.stringify(item));
  });
}

// 发送请求，无需手动设置Content-Type
await apiForm.post(`${typeForm}`, formData);

验证步骤 #

打开浏览器开发者工具的Network面板，查看请求的Form Data部分，确认ITPS字段格式符合后端要求；若有API文档，优先对照文档确认数组参数的接收规范。

内容的提问来源于stack exchange，提问作者Gustavo da Silva Barbosa