如何使用Angular 4结合Spring实现图片上传？

Hey there! Let's walk through a solid implementation for image upload using Angular 4 paired with a Spring backend. I'll break this into clear frontend and backend sections, plus key tips to avoid common pitfalls.

Core Implementation Idea #

We'll use Angular 4's HttpClient to send image files as FormData (the standard for file uploads), while the Spring backend will accept the file via MultipartFile, handle storage, and return a status response.

Angular 4 Frontend Code #

1. Component Template (HTML) #

Create a simple UI to select and upload images:

<div class="upload-container">
  <input 
    type="file" 
    (change)="onFileSelected($event)" 
    accept="image/*"
    class="file-input"
  >
  <button 
    (click)="onUpload()" 
    [disabled]="!selectedFile"
    class="upload-btn"
  >
    Upload Image
  </button>
  <p *ngIf="uploadStatus" class="status-message">{{uploadStatus}}</p>
</div>

2. Component Logic (TypeScript) #

Handle file selection and send the upload request:

import { Component } 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 {
  selectedFile: File | null = null;
  uploadStatus: string = '';

  constructor(private http: HttpClient) {}

  onFileSelected(event: Event): void {
    const input = event.target as HTMLInputElement;
    if (input.files && input.files.length > 0) {
      this.selectedFile = input.files[0];
      this.uploadStatus = '';
    }
  }

  onUpload(): void {
    if (!this.selectedFile) {
      this.uploadStatus = 'Please select an image first!';
      return;
    }

    // Wrap the file in FormData
    const formData = new FormData();
    formData.append('image', this.selectedFile, this.selectedFile.name);

    // Send POST request to Spring backend
    this.http.post('http://localhost:8080/api/upload/image', formData)
      .subscribe({
        next: (response: any) => {
          this.uploadStatus = `Success! File saved to: ${response.filePath}`;
        },
        error: (err) => {
          this.uploadStatus = `Upload failed: ${err.error.message || 'Unknown error'}`;
        }
      });
  }
}

3. Add HttpClientModule to Your App Module #

Don't forget to enable HTTP functionality in your root module:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';
import { ImageUploadComponent } from './image-upload/image-upload.component';

@NgModule({
  declarations: [AppComponent, ImageUploadComponent],
  imports: [BrowserModule, HttpClientModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

Spring Backend Code #

1. Upload Controller #

Create a REST controller to handle file uploads:

import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;

import java.io.File;
import java.io.IOException;
import java.nio.file.Files;
import java.nio.file.Path;
import java.nio.file.Paths;
import java.util.HashMap;
import java.util.Map;
import java.util.UUID;

@RestController
@RequestMapping("/api/upload")
@CrossOrigin(origins = "http://localhost:4200") // Allow CORS from Angular's default port
public class ImageUploadController {

    // Define your storage directory (update this to your preferred path)
    private static final String UPLOAD_DIR = "/opt/app/uploads/images/";

    @PostMapping("/image")
    public ResponseEntity<Map<String, String>> uploadImage(
            @RequestParam("image") MultipartFile file
    ) {
        Map<String, String> response = new HashMap<>();

        // Validate file
        if (file.isEmpty()) {
            response.put("message", "No file selected for upload");
            return new ResponseEntity<>(response, HttpStatus.BAD_REQUEST);
        }

        // Validate file type (optional but recommended)
        String contentType = file.getContentType();
        if (contentType == null || !contentType.startsWith("image/")) {
            response.put("message", "Only image files are allowed");
            return new ResponseEntity<>(response, HttpStatus.BAD_REQUEST);
        }

        try {
            // Create directory if it doesn't exist
            File uploadDirectory = new File(UPLOAD_DIR);
            if (!uploadDirectory.exists()) {
                uploadDirectory.mkdirs();
            }

            // Generate unique filename to avoid conflicts
            String fileExtension = file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf("."));
            String uniqueFileName = UUID.randomUUID().toString() + fileExtension;
            Path filePath = Paths.get(UPLOAD_DIR + uniqueFileName);

            // Save the file
            Files.write(filePath, file.getBytes());

            response.put("message", "File uploaded successfully");
            response.put("filePath", filePath.toString());
            return new ResponseEntity<>(response, HttpStatus.OK);

        } catch (IOException e) {
            response.put("message", "Failed to upload file: " + e.getMessage());
            return new ResponseEntity<>(response, HttpStatus.INTERNAL_SERVER_ERROR);
        }
    }
}

2. Configure File Upload Limits (application.properties) #

Add these properties to your Spring Boot config to set file size limits:

# Max file size per upload
spring.servlet.multipart.max-file-size=10MB
# Max total size for the entire request
spring.servlet.multipart.max-request-size=10MB

Key Notes for Production #

• CORS Configuration: For production, narrow down the allowed origins instead of using * or a local development URL.
• File Storage: Avoid storing files locally in production. Use cloud storage services (like AWS S3, Google Cloud Storage) and adapt the backend to use their SDKs instead of writing to the filesystem.
• Security: Add authentication/authorization to the upload endpoint to prevent unauthorized uploads.
• File Validation: Extend validation to check file size, resolution, and scan for malware if needed.

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