Angular与ExpressJS整合Multer实现多图片上传的完整指南

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { YourPropertiesService } from './your-properties.service'; // 假设你的服务

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {
  uploadPropertyForm: FormGroup;
  selectedPictures: File[] = []; // 存储用户选择的文件

  constructor(
    private fb: FormBuilder,
    private propertiesService: YourPropertiesService
  ) {
    this.uploadPropertyForm = this.fb.group({
      // 其他表单字段，例如：
      propertyName: ['', Validators.required],
      propertyDescription: ['', Validators.required],
      // 文件输入通常不直接绑定到FormGroup，而是通过事件处理
    });
  }

  // 处理文件选择事件
  onFileSelected(event: any) {
    if (event.target.files && event.target.files.length > 0) {
      // 将新选择的文件添加到 selectedPictures 数组中
      for (let i = 0; i < event.target.files.length; i++) {
        this.selectedPictures.push(event.target.files[i]);
      }
      // 可以选择清空文件输入，以便再次选择相同文件
      event.target.value = null;
    }
  }

  // 移除已选择的图片（可选）
  removePicture(index: number) {
    this.selectedPictures.splice(index, 1);
  }

  // 上传属性及图片
  async uploadProperty() {
    if (this.uploadPropertyForm.valid && this.selectedPictures.length > 0) {
      const formData = new FormData();

      // 添加其他表单数据
      formData.append('propertyName', this.uploadPropertyForm.get('propertyName')?.value);
      formData.append('propertyDescription', this.uploadPropertyForm.get('propertyDescription')?.value);

      // 关键：正确地添加图片文件
      // 对于多文件上传，必须使用 formData.append() 并且所有文件都使用相同的字段名
      for (let i = 0; i < this.selectedPictures.length; i += 1) {
        formData.append('pictures', this.selectedPictures[i], this.selectedPictures[i].name);
      }

      this.propertiesService
        .uploadPictures(formData)
        .subscribe(
          (response) => {
            console.log('上传成功', response);
            // 处理成功响应，例如重置表单或显示消息
            this.uploadPropertyForm.reset();
            this.selectedPictures = [];
          },
          (error) => {
            console.error('上传失败', error);
            // 处理错误
          }
        );
    } else {
      console.warn('表单无效或未选择图片');
      // 可以在此处添加用户提示
    }
  }
}

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { environment } from 'src/environments/environment'; // 假设你使用环境配置

@Injectable({
  providedIn: 'root'
})
export class YourPropertiesService {
  private baseUrl = environment.apiUrl + '/properties'; // 假设你的API基础URL

  constructor(private http: HttpClient) {}

  uploadPictures(formData: FormData): Observable<any> {
    const url = `${this.baseUrl}/uploadPictures`;
    // HttpClient会自动设置Content-Type为'multipart/form-data'，无需手动设置
    return this.http.post(url, formData);
  }
}

<form [formGroup]="uploadPropertyForm" (ngSubmit)="uploadProperty()">
  <div>
    <label for="propertyName">属性名称:</label>
    <input id="propertyName" type="text" formControlName="propertyName" />
  </div>
  <div>
    <label for="propertyDescription">属性描述:</label>
    <textarea id="propertyDescription" formControlName="propertyDescription"></textarea>
  </div>

  <div>
    <label for="pictureUpload">选择图片:</label>
    <!-- multiple 属性允许选择多个文件 -->
    <input type="file" id="pictureUpload" (change)="onFileSelected($event)" multiple accept="image/*" />
  </div>

  <div *ngIf="selectedPictures.length > 0">
    <p>已选择图片 ({{ selectedPictures.length }} 张):</p>
    <ul>
      <li *ngFor="let pic of selectedPictures; let i = index">
        {{ pic.name }} ({{ (pic.size / 1024 / 1024).toFixed(2) }} MB)
        <button type="button" (click)="removePicture(i)">移除</button>
      </li>
    </ul>
  </div>

  <button type="submit" [disabled]="!uploadPropertyForm.valid || selectedPictures.length === 0">上传</button>
</form>

npm install multer

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

// 配置Multer存储
// 使用 memoryStorage 将文件存储在内存中，适合小文件或需要进一步处理文件流的场景
// 如果需要将文件保存到磁盘，请使用 multer.diskStorage
const storage = multer.memoryStorage();
let upload = multer({
  storage: storage,
  limits: {
    fileSize: 5 * 1024 * 1024 // 限制文件大小为5MB，根据需求调整
  }
});

// 定义上传图片的路由
// upload.array("pictures", 5) 表示期望接收一个名为 "pictures" 的字段，最多包含5个文件
router.post('/uploadPictures', upload.array("pictures", 5), (req, res) => {
  // req.files 包含了所有上传的图片文件
  // req.body 包含了FormData中除了文件以外的其他字段数据

  if (!req.files || req.files.length === 0) {
    return res.status(400).send('未检测到图片文件。');
  }

  console.log('接收到的文件:', req.files); // 这是一个文件对象数组
  console.log('接收到的表单数据:', req.body); // 其他文本字段数据

  // 在这里可以对文件进行进一步处理，例如：
  // 1. 将文件保存到云存储 (AWS S3, Azure Blob Storage)
  // 2. 将文件保存到本地磁盘 (如果使用 diskStorage)
  // 3. 记录文件信息到数据库
  // 4. 进行图片处理（缩略图、水印等）

  const uploadedFileNames = req.files.map(file => file.originalname);

  res.status(200).json({
    message: '图片上传成功！',
    files: uploadedFileNames,
    bodyData: req.body
  });
});

module.exports = router; // 如果是在路由文件中，需要导出路由