React前端文件上传报错：无法读取filename，Node.js后端Postman正常

核心问题 #

前端请求头错误设置了"Content-Type": "application/json"，导致后端无法正确解析FormData格式的文件上传请求，进而req.file为undefined，引发读取filename的报错。Postman能正常工作是因为它自动设置了正确的multipart/form-data请求头（包含自动生成的boundary）。

修复步骤 #

1. 修正前端请求头配置 #

删除手动设置的"Content-Type": "application/json"，让浏览器自动处理FormData的请求头：

const insertFiles = async () => {
  try {
    const token = localStorage.getItem('token')
    if (!token) return 
   
    const config = {
        headers: {
            Authorization: `Bearer ${token}`
            // 移除Content-Type设置
        }
    }
    const upLoadFile = await clienteAxios.post('/cfdi-nomina', formData, config)
  } catch (error) {
    console.error(error);
  }
}

如果必须手动设置，需指定multipart/form-data但不写boundary（浏览器会自动补充）：

headers: {
    "Content-Type": "multipart/form-data",
    Authorization: `Bearer ${token}`
}

2. 优化FormData的作用域（可选但建议） #

当前组件内FormData是全局变量，多次选择文件可能导致数据冗余。建议在uploadFiles或insertFiles内重新创建：

const [formData, setFormData] = useState(new FormData())

const uploadFiles = e => {
  if (e.target && e.target.files[0]) {
    const newFormData = new FormData()
    newFormData.append('cfdi', e.target.files[0])
    setFormData(newFormData)
  }
}

3. 确认后端multer配置的字段一致性 #

确保后端multer的接收字段名和前端formData.append的字段名一致。比如如果后端使用multer的single方法，应该是：

const upload = multer({ dest: 'uploads/' }).single('cfdi')

这里的'cfdi'必须和前端formData.append('cfdi', ...)的第一个参数完全匹配。

验证 #

修改后重新测试前端上传，此时后端应该能正确解析req.file，读取filename不再报错。

内容的提问来源于stack exchange，提问作者Alberto Chávaro