如何在JavaScript中将含文件的对象数组追加到FormData

AI 小北

2026-8-10

如何将含文件的嵌套对象数组追加到FormData中

你的核心问题是FormData的键名和原数据结构不匹配，同时数组格式的写法需要调整，以下是正确的实现方式：

错误原因分析

你之前的代码里把键名写成了document[0][...]，但原payload的顶层键是复数的documents，这会导致后端无法正确解析对应字段；另外文件数组的键名格式也需要对应后端的解析规则。

正确代码实现

const payload = {
  documents: [
    { doc_category: someValue, doc_files: [file1.pdf, file2.pdf, file3.pdf] }
  ]
};

const formData = new FormData();

// 遍历documents数组，处理每个文档对象
payload.documents.forEach((documentItem, docIndex) => {
  // 追加文档分类
  formData.append(`documents[${docIndex}][doc_category]`, documentItem.doc_category);
  
  // 遍历当前文档下的文件数组，逐个追加
  documentItem.doc_files.forEach((file) => {
    // 用[]后缀标识数组字段，后端框架（如multer、PHP等）会自动识别为数组
    formData.append(`documents[${docIndex}][doc_files][]`, file);
    // 如果后端要求带索引，也可以写成：`documents[${docIndex}][doc_files][${fileIndex}]`
  });
});

// 后续axios请求保持不变
axios.post('/url', formData, { headers: { 'Content-Type': 'multipart/form-data' }})
 .then(/* 处理响应 */)
 .catch(/* 处理错误 */);