Express.js为何将Angular传来的FormData显示为字符串？如何解析为可访问的对象？

嘿，我看到你的问题了——问题出在两个关键地方：Angular那边错误设置了请求头，Express这边用了不对的解析中间件。咱们一步步来修复：

你遇到的乱码字符串其实是未被正确解析的multipart/form-data格式数据，导致这个问题的原因：

1. Angular手动指定了错误的Content-Type，破坏了FormData的自动编码逻辑
2. Express使用的express.urlencoded()中间件，只能处理application/x-www-form-urlencoded格式的数据，完全不兼容FormData的multipart/form-data格式

第一步：修正Angular服务的请求头 #

当发送FormData时，绝对不要手动设置Content-Type为application/x-www-form-urlencoded——HttpClient会自动为FormData生成正确的multipart/form-data请求头，还会自动添加解析必需的边界符（boundary）。

修改你的Angular服务代码，删掉错误的请求头设置：

private serverUrl: string = 'http://localhost:3001/';
constructor(private http: HttpClient) { }
newBooking(data): Observable<any> {
  return this.http.post<any>(
    this.serverUrl + 'booking',
    data,
    {
      // 移除这行错误的Content-Type配置
      // headers: new HttpHeaders({
      //   'Content-Type': 'application/x-www-form-urlencoded',
      // }),
      withCredentials: true
    }
  );
}

第二步：在Express中用multer解析FormData #

express.urlencoded()处理不了multipart/form-data格式的数据，你需要用multer这个专门的中间件来解析FormData（包括文件上传）。

1. 安装multer #

在你的Express项目根目录运行：

npm install multer

2. 配置并使用multer #

导入multer并创建实例，然后在对应的路由上应用它来解析请求。示例代码如下：

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

// 创建multer实例：用memoryStorage可以把文件存在内存中，不需要写入磁盘
const storage = multer.memoryStorage();
const upload = multer({ storage: storage });

// 在booking路由上使用multer，指定要解析的文件字段名（这里是'webmasterfile'）
app.post('/booking', upload.single('webmasterfile'), (req, res) => {
  // req.file 是上传的webmasterfile文件对象（包含文件名、类型、内容Buffer等）
  // req.body 是FormData里的普通文本字段，比如testing2
  console.log('普通字段testing2的值:', req.body.testing2);
  console.log('上传的文件信息:', req.file);
  
  // 如果需要读取文件内容，可以把Buffer转成字符串
  const fileContent = req.file.buffer.toString();
  console.log('文件内容:', fileContent);
  
  res.status(200).json({ 
    message: '数据解析成功',
    textFields: req.body,
    fileInfo: { name: req.file.originalname, type: req.file.mimetype }
  });
});

app.listen(3001, () => console.log('Server running on port 3001'));

补充说明： #

• 如果FormData里有多个文件，可用upload.array('fieldname', maxCount)或upload.fields([{name: 'field1'}, {name: 'field2'}])
• 如果只需要解析普通文本字段（无文件），可以用upload.none()

修改完代码后，重启Express服务器和Angular应用，提交表单后，你就能在Express控制台看到清晰的解析结果，直接访问req.body和req.file里的字段即可。

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