Angular向Node.js服务器发送FormData无法获取表单数据求助

你遇到的核心问题是Node.js服务器没有正确解析multipart/form-data类型的请求——这就是为什么能拿到req.files但req.body只显示[object object]的原因。默认的body-parser中间件并不处理这类包含文件的表单数据，得用专门的工具来搞定。

解决方案步骤： #

1. 安装并配置multer中间件

multer是Node.js生态里专门处理multipart/form-data的中间件，先安装它：

npm install multer --save

2. 在Node.js服务器中配置multer

根据你的需求，可选择把文件存到磁盘，或者临时存在内存里，这里给两种常见配置：

配置一：存储到磁盘（适合需要持久化文件的场景）

const express = require('express');
const multer = require('multer');
const app = express();

// 设置文件存储路径和文件名规则
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, './uploads/'); // 请确保这个文件夹已提前创建
  },
  filename: function (req, file, cb) {
    cb(null, Date.now() + '-' + file.originalname); // 避免文件名重复
  }
});

const upload = multer({ storage: storage });

配置二：临时存在内存（适合不需要保存文件到磁盘的场景）

const upload = multer({ storage: multer.memoryStorage() });

3. 修改路由处理逻辑

在接收请求的路由中，使用multer的中间件解析表单。因为你只上传了一个名为image的文件，所以用upload.single('image')即可：

app.put('/api/seller/businessInformation', upload.single('image'), (req, res) => {
  // 现在req.body就能正常获取Angular传来的所有表单字段了
  console.log('表单字段：', req.body);
  // req.file是上传的图片文件的详细信息
  console.log('图片文件：', req.file);
  
  // 这里写你的业务逻辑...
  res.status(200).json({ message: '信息更新成功' });
});

额外优化Angular代码的小细节 #

你的Angular代码里有个小瑕疵：console.log(key, $scope.seller)写在了for...in循环外面，这时候key只会是最后一个遍历到的属性。如果要打印每个属性的键值对，应该把这句放到循环内部：

for(key in $scope.seller){ 
    formData.append(key, $scope.seller[key]); 
    console.log(key, $scope.seller[key]); // 移到循环内，打印每个属性的具体值
} 

调整完成后，Node端就能正常获取req.body里的所有表单字段，同时req.file也能拿到图片的完整数据了。

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