Angular 2 POST传图片至Node.js后端S3上传失败问题排查

你遇到的问题核心是文件上传的方式不符合HTTP标准，前端没有正确封装文件，后端也没配置对应的解析中间件，导致文件根本没传到后端。下面分两部分讲清楚问题和修复步骤：

一、前端问题：错误的文件发送方式 #

你直接把File对象作为POST请求体发送，还手动设置了Content-Type: image/jpg，这是不对的：

• 文件上传必须用multipart/form-data格式，而非普通JSON或二进制格式
• 手动设置Content-Type会丢失浏览器自动生成的boundary分隔符，后端无法正确解析请求

前端修复代码 #

修改jobService中的s3Upload方法，用FormData包装文件，并且不要手动设置请求头：

s3Upload(file){ 
  const formData = new FormData();
  formData.append('image', file); // 这里的键名'image'要和后端配置对应
  // 无需手动设置headers，HttpClient会自动添加正确的multipart/form-data头
  return this.http.post('http://localhost:3000/job/s3upload', formData) 
    .map((response:Response) => { 
      console.log(response); 
      return response; 
    }) 
    .catch((error:Response) => { 
      this.errorService.handleError(error.json()); 
      return Observable.throw(error.json()); 
    }); 
}

二、后端问题：缺少文件解析中间件 #

你的后端没有配置处理multipart/form-data请求的中间件，无法解析上传的文件，导致req.body是空对象，进而S3的参数缺失。我们需要用multer这个Node.js中间件来处理文件上传。

后端修复步骤 #

1. 首先安装multer：

npm install multer --save

2. 修改路由代码，添加multer配置并解析文件：

const multer = require('multer');
// 用内存存储文件（因为我们要直接传到S3，不需要存本地）
const storage = multer.memoryStorage();
const upload = multer({ storage: storage });

router.post('/s3upload', upload.single('image'), function(req,res){ 
  // 上传的文件信息现在存在req.file里
  const file = req.file;
  if (!file) {
    return res.status(400).json({ title: 'No file uploaded', error: 'Please select an image' });
  }
  
  console.log('Received file:', file); 
  aws.config.update({ 
    "accessKeyId": process.env.AWS_ACCESS_KEY_ID, 
    "secretAccessKey": process.env.AWS_SECRET_ACCESS_KEY, 
    "region": "us-west-2" 
  }); 
  const s3 = new aws.S3(); 
  var params = { 
    Bucket: 'labeller-images', 
    Key: file.originalname, // 使用文件原始名称，也可以自定义命名
    ContentType: file.mimetype, 
    Body: file.buffer, // 用multer解析出的buffer，符合S3的参数要求
    ACL: 'public-read' 
  }; 
  console.log('S3 upload params:', params); 
  
  s3.putObject(params, function (err, data) { 
    if (err) { 
      console.log("S3 upload error:", err); 
      return res.status(500).json({ title: 'Upload failed', error: err }); 
    } else { 
      console.log("Successfully uploaded to S3"); 
      res.status(200).json({ message: 'Success', obj: `https://labeller-images.s3.amazonaws.com/${file.originalname}` }) 
    } 
  }); 
});

为什么之前会报错？ #

• MissingRequiredParameter：因为后端没拿到文件，file.name是undefined，所以S3的Key参数缺失
• InvalidParameterType：req.body是空对象，传给S3的Body是{}，不符合S3要求的字符串/Buffer/Stream等类型

这样修改后，前端会正确发送文件，后端能解析出文件的buffer和元信息，再传给S3就能成功上传了。

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