Angular 5如何结合Multer实现文件上传至Node.js？

我来帮你把这段原生XHR代码改成Angular 5的规范实现，同时搭配Node.js的Multer完成文件上传，分前后端两部分拆解：

一、前端 Angular 5 改造 #

你原来的代码用了原生XMLHttpRequest，Angular 5推荐用HttpClient来处理HTTP请求，更符合框架规范，也更简洁。

1. 注入HttpClient到服务 #

在你的服务文件顶部引入HttpClient，并在构造函数中注入：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class FileUploadService {
  private url = '你的Node.js服务基础地址'; // 示例：'http://localhost:3000'

  constructor(private http: HttpClient) { }
}

2. 重写uploadFiles方法 #

用HttpClient替代原生XHR，重点提醒：不要手动设置Content-Type——当传入FormData时，Angular会自动添加带正确boundary的multipart/form-data请求头，手动设置反而会导致Multer无法解析文件：

uploadFiles(files: FileList): Observable<any> {
  const fd = new FormData();
  // 保持你原来的逻辑，将文件添加到FormData
  fd.append('file', files[0], files[0].name);

  // 发送POST请求，返回Observable（也可转成Promise适配你的原有逻辑）
  return this.http.post(`${this.url}/equipos/uploadfiles`, fd, {
    // 可选配置：开启上传进度监听
    reportProgress: true,
    observe: 'events'
  });
}

3. 在组件中调用服务 #

比如在上传组件里处理文件选择和请求：

import { Component } from '@angular/core';
import { FileUploadService } from './file-upload.service';

@Component({
  selector: 'app-file-upload',
  templateUrl: './file-upload.component.html'
})
export class FileUploadComponent {
  constructor(private uploadService: FileUploadService) { }

  onFileSelected(event: any) {
    const files = event.target.files;
    if (files.length > 0) {
      this.uploadService.uploadFiles(files)
        .subscribe({
          next: (response) => {
            console.log('文件上传成功', response);
            // 这里添加你的成功处理逻辑
          },
          error: (err) => {
            console.error('文件上传失败', err);
            // 这里添加你的错误处理逻辑
          }
        });
    }
  }
}

配套组件模板示例（file-upload.component.html）：

<input type="file" (change)="onFileSelected($event)">

二、后端 Node.js + Multer 配置 #

接下来配置Node.js端的Multer，处理前端传来的文件：

1. 安装依赖 #

在你的Node.js项目中安装multer：

npm install multer --save

2. 配置Express上传路由 #

假设你用Express框架，创建处理上传的路由文件：

const express = require('express');
const router = express.Router();
const multer = require('multer');
const fs = require('fs');
const path = require('path');

// 自动创建uploads目录（避免Multer因目录不存在报错）
const uploadDir = path.join(__dirname, '../uploads');
if (!fs.existsSync(uploadDir)) {
  fs.mkdirSync(uploadDir);
}

// 配置Multer存储规则：路径+文件名
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, uploadDir);
  },
  filename: function (req, file, cb) {
    // 生成唯一文件名，避免重名覆盖
    const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1E9);
    cb(null, `${file.fieldname}-${uniqueSuffix}-${file.originalname}`);
  }
});

// 初始化Multer实例，可添加文件大小、类型限制
const upload = multer({ 
  storage: storage,
  limits: { fileSize: 1024 * 1024 * 5 }, // 限制5MB
  fileFilter: (req, file, cb) => {
    // 可选：过滤文件类型，仅允许图片等
    const allowedTypes = ['image/jpeg', 'image/png', 'application/pdf'];
    if (allowedTypes.includes(file.mimetype)) {
      cb(null, true);
    } else {
      cb(new Error('仅支持JPG/PNG/PDF文件'));
    }
  }
});

// 处理上传请求，这里的'file'要和前端FormData的key完全一致
router.post('/equipos/uploadfiles', upload.single('file'), (req, res) => {
  if (!req.file) {
    return res.status(400).json({ message: '未选择上传文件' });
  }
  // 这里可添加文件信息存入数据库等逻辑
  res.status(200).json({ 
    message: '文件上传成功',
    fileInfo: {
      originalName: req.file.originalname,
      storedPath: req.file.path,
      size: req.file.size
    }
  });
});

module.exports = router;

3. 在Express主文件引入路由 #

在你的Express入口文件（如app.js）中挂载路由：

const express = require('express');
const app = express();
const uploadRouter = require('./routes/upload'); // 替换为你的路由文件路径

// 挂载上传路由
app.use('/', uploadRouter);

// 启动服务
const port = 3000;
app.listen(port, () => {
  console.log(`服务运行在 http://localhost:${port}`);
});

关键注意事项 #

• 后端的uploads目录会自动创建，但如果需要自定义存储路径，确保权限正确。
• 若需上传多个文件，前端可多次调用fd.append('files', file)，后端改用upload.array('files', 5)（5为最大允许上传数）接收。
• 可根据业务需求添加文件类型、大小的校验逻辑，避免非法文件上传。

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