AngularJS 5通过Post方法无法向Node.js服务器传输上传文件

我帮你定位到了几个关键问题，Postman能成功但Angular前端不行，主要是前端请求格式错误和后端响应逻辑问题，下面一步步修正：

一、前端Angular代码修正 #

问题点： #

1. FormData的字段名和后端multer配置不匹配
2. 错误地将FormData包裹在对象中发送
3. 手动设置Content-Type: multipart/form-data导致服务器解析失败

修改后的组件代码： #

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-file-upload',
  templateUrl: './file-upload.component.html',
  styleUrls: ['./file-upload.component.css']
})
export class FileUploadComponent implements OnInit {
  public url: string = "http://localhost:3000/Tasks"; // end point (node js)
  fileToUpload: File = null;
  
  constructor(private http: HttpClient) { }

  ngOnInit() {
  }

  fileChange(files: FileList) {
    if(files.length > 0) {
      this.fileToUpload = files.item(0);
      console.log(this.fileToUpload.name);
      
      // 1. 字段名改为'file'，和后端multer.single('file')对应
      let formData: FormData = new FormData();
      formData.append('file', this.fileToUpload, this.fileToUpload.name);
      
      // 2. 直接传递formData，不要包裹在对象里；去掉手动设置的Content-Type
      this.http.post(`${this.url}/upload`, formData)
      .subscribe(
        res => {
          console.log(res);
        },
        err => {
          console.log("Error occured:", err);
        }
      );
    }
  }
}

关键说明： #

• 字段名匹配：后端用multer({...}).single('file')，所以FormData的键必须是file，不能是upload file
• 不要包裹FormData：http.post的第二个参数直接传FormData实例，{formData}会变成{formData: FormData}，服务器无法识别
• 自动处理Content-Type：浏览器会自动为multipart请求生成包含boundary的Content-Type头，手动设置会丢失boundary，导致服务器无法解析文件

二、后端Node.js路由修正 #

问题点： #

提前发送了响应res.json({success: 'file uploaded successfuly ...'})，导致后续upload回调中的res.json报错（响应已结束），同时也会中断文件上传流程

修改后的路由代码： #

var express = require('express');
var router = express.Router();
var multer = require("multer");
var Task = require('../models/Task');

var storage = multer.diskStorage({ //multers disk storage settings
  destination: function (req, file, callback) {
    callback(null, './uploads');
  },
  filename: function (req, file, callback) {
    var datetimestamp = Date.now();
    callback(null, file.fieldname + '-' + datetimestamp + '.jpg');
  }
});
var upload = multer({storage: storage}).single('file');

/** API path that will upload the files */
router.post('/upload',function(req, res) {
  // 去掉提前发送的res.json，等待upload回调完成再响应
  upload(req,res,function(err){
    console.log('post() ..../////');
    console.log(req.file)
    if(err){
      res.json({error_code:1, err_desc:err});
      return;
    }
    res.json({
      error_code:0,
      err_desc:null,
      success: 'file uploaded successfuly ...'
    });
  });
});
module.exports = router;

关键说明： #

• 必须等待multer的upload回调完成后再发送响应，提前发送会终止请求流程，导致文件没有被处理

三、额外检查项 #

1. 确保服务器的uploads文件夹存在，否则multer会报错
2. 检查CORS配置：如果Angular和Node不在同一端口，需要在Node端配置CORS（比如用cors中间件），否则会有跨域问题
3. HTML模板无需修改，保持原样即可

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