Axios v0.21.0多文件上传异常排查：Node.js服务端无法接收多文件问题

你遇到的核心问题是直接将FileList对象传递给FormData.append()，而FormData无法正确解析整个FileList为多文件集合。Multer之所以在单文件（.files[0]）时正常，是因为你传递的是单个File对象，符合FormData的要求；但传整个FileList时，后端无法识别为有效的文件数组，导致req.files为空。

错误原因详解 #

document.getElementById('images').files返回的是FileList类数组对象，而FormData.append()方法对于文件类型，需要接收单个File对象。直接传递整个FileList的话，FormData会把它当作一个普通对象处理，而非多个文件，所以后端multer无法解析出文件。

修复方案 #

有两种简单的修复方式，任选其一即可：

方式1：循环FileList，逐个添加文件到FormData

修改你的index.js代码，遍历选中的所有文件，逐个append到FormData中：

const form = document.querySelector('.form')
if(form) {
 form.addEventListener('submit', e => {
 e.preventDefault()
 const formData = new FormData()
 const fileInput = document.getElementById('images')
 // 遍历所有选中的文件，逐个添加
 for (let i = 0; i < fileInput.files.length; i++) {
   formData.append('images', fileInput.files[i])
 }
 addFiles(formData) // 注意这里传的是formData，不是form！
 })
}

注意：append的第一个参数要保持一致（都是'images'），这样multer才能识别为同一个字段下的文件数组。

方式2：直接用表单元素初始化FormData（更简洁）

FormData的构造函数可以直接接收一个<form>元素，自动处理所有表单数据（包括多文件），不需要手动append：

const form = document.querySelector('.form')
if(form) {
 form.addEventListener('submit', e => {
 e.preventDefault()
 // 直接用表单初始化FormData
 const formData = new FormData(form)
 addFiles(formData)
 })
}

这种方式更简洁，还能自动处理表单里的其他文本字段（如果有的话）。

额外注意事项 #

1. 不要手动设置Axios的Content-Type：当你传递FormData给Axios时，它会自动设置正确的multipart/form-data请求头，并且包含正确的boundary分隔符。手动设置反而可能因为缺少boundary导致后端解析失败。
2. 确认后端multer配置：确保你用的是multer().array('images')（处理多文件），而不是single('images')（仅单文件）。比如后端代码应该类似：

const multer = require('multer');
const upload = multer().array('images');

app.post('/api/v1/resources', upload, (req, res) => {
  console.log(req.files); // 现在应该能拿到多文件数组了
  // 其他处理逻辑
});

按照上面的方式修改后，多文件上传应该就能正常工作了，和Postman的请求效果一致。

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