Angular+NodeJS文件与参数同传问题排查求助

你的核心问题是multer中间件使用方式错误，没有在路由层面挂载multer来解析FormData请求，同时前端传递对象参数时也需要做格式处理，导致后端无法获取到req.file和req.body数据。

一、后端代码修正 #

1. 正确挂载multer中间件 #

multer是Express的中间件，必须在路由处理函数之前执行，才能解析FormData并填充req.file和req.body。你当前在控制器函数内部调用upload.single('body.file')完全无效，因为此时请求已经被传递到控制器，multer没有机会解析请求体。

修改路由配置（假设你的路由文件是routes/structure.js）：

const express = require('express');
const router = express.Router();
const { saveDrawing } = require('../controllers/your-controller-file');
const multer = require('multer');
const fs = require('fs');

// 确保上传目录存在，避免multer报错
const uploadDir = './uploadedImages';
if (!fs.existsSync(uploadDir)) {
  fs.mkdirSync(uploadDir);
}

// 保持你的storage配置不变
const storage = multer.diskStorage({
  destination: uploadDir,
  filename: function(req, file, cb){
    cb(null, file.originalname)
  }
});
const upload = multer({ storage: storage });

// 关键：把upload.single('file')作为路由中间件挂载
router.post('/structure/drawing/save', upload.single('file'), saveDrawing);

module.exports = router;

2. 修正控制器函数 #

移除控制器内无效的upload.single('body.file')调用，同时匹配前端FormData的字段名：前端用formData.append('data', params)，后端要从req.body.data获取参数，且需解析JSON字符串：

exports.saveDrawing = async(req, res, next) => {
  try {     
    // 现在可以正确获取文件和参数了
    console.log("上传的文件:", req.file);
    // 解析前端传递的JSON格式参数
    const params = JSON.parse(req.body.data);
    console.log("参数:", params);

    // 这里编写你的保存逻辑（如文件信息入库等）
    return res.status(200).json({ message: "文件和参数保存成功" });
  } catch (err) {
    console.log("保存绘图错误:", err);
    return res.status(500).json({ message: "无法添加/编辑绘图" });
  }
}

二、前端代码修正 #

如果params是JavaScript对象，直接用formData.append('data', params)会导致后端收到字符串"[object Object]"，需要先转为JSON字符串：

setDrawing(params: any, image: File): Observable<any> {
  const formData = new FormData();
  
  formData.append('file', image);
  // 将对象转为JSON字符串传递
  formData.append('data', JSON.stringify(params));
  
  console.log("File:", formData.get('file'));
  console.log("Data:", formData.get('data'));
  
  return this.http.post<any>(`api/v1/structure/drawing/save`, formData);
}

三、额外注意事项 #

• 前端发送请求时无需手动设置Content-Type，Angular的HttpClient会自动根据FormData设置正确的multipart/form-data请求头。
• 确保后端服务有./uploadedImages目录的读写权限。

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