使用Spring boot和angular上传文件

Question

我需要上传文件使用Spring引导和角，所以这是控制器代码，很好地工作使用邮差

 @PostMapping("/uploadFile")
 public ResponseEntity<String> uploadFile(@RequestParam("file") MultipartFile file) {
    String fileName = fileStorageService.storeFile(file);
    String message = "";
    String fileDownloadUri = ServletUriComponentsBuilder.fromCurrentContextPath()
            .path("/downloadFile/")
            .path(fileName)
            .toUriString();

    message = "You successfully uploaded " + file.getOriginalFilename() + "!";
    return ResponseEntity.status(HttpStatus.OK).body(message);
}

pushFileToStorage(file: File): Observable<HttpEvent<{}>> {
    const formdata: FormData = new FormData();
    formdata.append('file', file);
    const req = new HttpRequest('POST', this.indicatorUrl+'/uploadFile', formdata, {
    reportProgress: true,
    responseType: 'text' });
 return this.httpclient.request(req);}

-component.ts代码：

  title = 'File-Upload-Save';
  selectedFiles: FileList;
  currentFileUpload: File;
  progress: { percentage: number } = { percentage: 0 };
  selectedFile = null;
  changeImage = false;


change($event) {
    this.changeImage = true; }
changedImage(event) {
    this.selectedFile = event.target.files[0];}
upload() {
    this.progress.percentage = 0;
    this.currentFileUpload = this.selectedFiles.item(0);
    this.indicatorservice.pushFileToStorage(this.currentFileUpload).subscribe(event => {
    if (event.type === HttpEventType.UploadProgress) {
         this.progress.percentage = Math.round(100 * event.loaded / event.total);
    } else if (event instanceof HttpResponse) {
         alert('File Successfully Uploaded');
    }
    this.selectedFiles = undefined;
 }); }
selectFile(event) {
this.selectedFiles = event.target.files; }

-HTML代码：

 <h1>Upload and Download File</h1>
<input type="file" id="customFile" (change)="selectFile($event)">
<button class="btn btn-primary" [disabled]="!selectedFiles || admincheck || status" 
(click)="upload()">Save File</button>

出现此错误

Answer 1

我在您的代码中看到的一个主要问题，您稍后会遇到，您没有在Angular代码中设置内容类型。

<form method="POST" enctype="multipart/form-data" action="/">

CORS是增加安全性的web标准。你应该详细读一下。在controller类中添加@CrossOrigin注释应该可以解决问题。本教程提到了许多解决此问题的方法https://www.baeldung.com/spring-cors