Angular上传图片并保存到spring-backend

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

@Component({
  selector: 'app-upload',
  templateUrl: './upload.component.html',
  styleUrls: ['./upload.component.css']
})
export class UploadComponent {
  selectedFile: File;

  constructor(private http: HttpClient) { }

  onFileSelected(event): void {
    this.selectedFile = event.target.files[0];
  }

  onUpload(): void {
    const reader = new FileReader();
    reader.onload = (e) => {
      const imageData = reader.result as string;
      this.uploadImage(imageData);
    };
    reader.readAsDataURL(this.selectedFile);
  }

  uploadImage(imageData: string): void {
    this.http.post('/api/upload', { image: imageData }).subscribe(
      () => {
        console.log('Image uploaded successfully');
      },
      (error) => {
        console.error('Failed to upload image', error);
      }
    );
  }
}

import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

@RestController
public class UploadController {

  @PostMapping("/api/upload")
  public void uploadImage(@RequestBody ImageData imageData) {
    // Save the image data to the server or database
    // ...
  }

  public static class ImageData {
    private String image;

    public String getImage() {
      return image;
    }

    public void setImage(String image) {
      this.image = image;
    }
  }
}