如何使用Angular 5与Node.js实现图片上传功能？

Hey there! Let's walk through how to build a solid image upload feature using Angular 5 for the frontend and Node.js (with Express) for the backend. I’ll break this into frontend and backend steps, with code snippets you can adapt directly.

1. Prepare Your Upload Component #

First, create an Angular component (let's call it image-upload.component) with a template that handles file selection, preview, and the upload action.

Template (image-upload.component.html) #

<div class="upload-container">
  <input 
    type="file" 
    accept="image/*" 
    (change)="onFileSelected($event)"
    #fileInput
  >
  <button (click)="uploadImage()" [disabled]="!selectedFile">Upload Image</button>

  <!-- Image Preview -->
  <div *ngIf="imagePreview">
    <h4>Preview:</h4>
    <img [src]="imagePreview" alt="Image preview" style="max-width: 300px;">
  </div>

  <!-- Status Messages -->
  <p *ngIf="uploadStatus" class="status">{{ uploadStatus }}</p>
</div>

Component Logic (image-upload.component.ts) #

We'll use Angular's HttpClient to send the file to the backend, and FormData to wrap the file data properly.

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

@Component({
  selector: 'app-image-upload',
  templateUrl: './image-upload.component.html',
  styleUrls: ['./image-upload.component.css']
})
export class ImageUploadComponent {
  @ViewChild('fileInput') fileInput: ElementRef;
  selectedFile: File;
  imagePreview: string;
  uploadStatus: string;

  constructor(private http: HttpClient) {}

  // Handle file selection and generate preview
  onFileSelected(event: Event): void {
    const file = (event.target as HTMLInputElement).files[0];
    if (file && file.type.startsWith('image/')) {
      this.selectedFile = file;
      const reader = new FileReader();
      reader.onload = () => {
        this.imagePreview = reader.result as string;
      };
      reader.readAsDataURL(file);
      this.uploadStatus = '';
    } else {
      this.uploadStatus = 'Please select a valid image file (JPG, PNG, etc.)';
      this.selectedFile = null;
      this.imagePreview = null;
    }
  }

  // Upload the file to Node.js backend
  uploadImage(): void {
    if (!this.selectedFile) return;

    const formData = new FormData();
    formData.append('image', this.selectedFile, this.selectedFile.name);

    this.http.post('http://localhost:3000/api/upload', formData)
      .subscribe(
        (response: any) => {
          this.uploadStatus = `Upload successful! File saved as: ${response.filename}`;
          this.fileInput.nativeElement.value = ''; // Reset file input
          this.selectedFile = null;
          this.imagePreview = null;
        },
        (error) => {
          this.uploadStatus = `Upload failed: ${error.error.message || 'Unknown error'}`;
        }
      );
  }
}

Don't Forget to Import HttpClientModule #

Add HttpClientModule to your AppModule imports to enable HTTP requests:

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [
    // ... other existing imports
    HttpClientModule
  ]
})
export class AppModule { }

We'll use Express as our web framework and multer to handle multipart/form-data (required for file uploads).

1. Set Up Dependencies #

Initialize a Node.js project and install required packages:

npm init -y
npm install express multer cors

2. Create the Server File (server.js) #

const express = require('express');
const multer = require('multer');
const cors = require('cors');
const path = require('path');
const fs = require('fs');

const app = express();
const PORT = 3000;

// Enable CORS to allow requests from Angular frontend
app.use(cors({ origin: 'http://localhost:4200' })); // Match your Angular app's URL

// Create uploads directory if it doesn't exist
const uploadDir = path.join(__dirname, 'uploads');
if (!fs.existsSync(uploadDir)) {
  fs.mkdirSync(uploadDir);
}

// Configure multer for file storage
const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, uploadDir);
  },
  filename: (req, file, cb) => {
    // Generate a unique filename to avoid overwrites
    const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1E9);
    const ext = path.extname(file.originalname);
    cb(null, `image-${uniqueSuffix}${ext}`);
  }
});

// Filter to only allow image files
const fileFilter = (req, file, cb) => {
  if (file.mimetype.startsWith('image/')) {
    cb(null, true);
  } else {
    cb(new Error('Only image files are allowed!'), false);
  }
};

const upload = multer({
  storage: storage,
  fileFilter: fileFilter,
  limits: { fileSize: 5 * 1024 * 1024 } // Limit to 5MB
});

// Create the upload endpoint
app.post('/api/upload', upload.single('image'), (req, res) => {
  if (!req.file) {
    return res.status(400).json({ message: 'No file uploaded' });
  }
  res.status(200).json({
    message: 'File uploaded successfully',
    filename: req.file.filename,
    filePath: `/uploads/${req.file.filename}`
  });
});

// Error handling for multer and server errors
app.use((err, req, res, next) => {
  if (err instanceof multer.MulterError) {
    return res.status(400).json({ message: err.message });
  } else if (err) {
    return res.status(400).json({ message: err.message });
  }
  next();
});

// Start the server
app.listen(PORT, () => {
  console.log(`Server running on http://localhost:${PORT}`);
});

• Cross-Origin Requests: Double-check that the cors origin matches your Angular app's URL (default is http://localhost:4200).
• File Validation: We added checks for file type and size on both frontend and backend—never rely solely on frontend validation, as it can be bypassed.
• File Storage: For production, avoid local filesystem storage; use cloud services like AWS S3 or Google Cloud Storage for scalability and reliability.
• Security: Sanitize filenames to prevent path traversal attacks, and restrict direct access to the uploads directory if sensitive images are involved.
• Error Handling: The examples include basic error handling, but you can expand this to cover edge cases like disk full errors or network timeouts.

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