Angular+Spring Boot文件上传遇500内部服务器错误求助

问题场景 #

Angular和Spring Boot新手开发文件上传功能，后端通过Postman测试正常，但前后端联调时返回500内部服务器错误。

现有代码 #

Spring Boot Controller #

@PostMapping("/upload")
public ResponseEntity<List<String>> uploadFiles(@RequestParam("files")List<MultipartFile> multipartFiles) throws IOException {
    List<String> filenames = new ArrayList<>();
    for(MultipartFile file : multipartFiles) {
        String filename = StringUtils.cleanPath(file.getOriginalFilename());
        Path fileStorage = get(DIRECTORY, filename).toAbsolutePath().normalize();
        copy(file.getInputStream(), fileStorage, REPLACE_EXISTING);
        filenames.add(filename);
    }
    return ResponseEntity.ok().body(filenames);
}

HTML 模板 #

<div class="upload-box">
  <form class="form-inline" method="POST"  enctype="multipart/form-data">
    <div class="form-group">
      <div class="icon">
        <i class="fa-solid fa-2x fa-file-arrow-up"></i>
        <p>Select your PDF file or drop it here</p>
      </div>
      <input class="select" type="file" class="form-control" id="pdfile" placeholder="file" accept="application/pdf" name="pdfFile"(change)="onSelectFile($event)" multiple>
    </div>
    <div class="button">
      <input class="submit" type="submit" value="Upload Pdf" (click)="uploadFile()">
    </div>
    
  </form>
</div>

Angular Component TS #

onSelectFile(event: any): void {
    this.selectedFiles= event.target?.files;
}

uploadFile()  {
    if (this.selectedFiles.length == 0) {
      console.log('No files selected.');
      return;
    }
    const formData = new FormData();
    for (const file of this.selectedFiles) {
      formData.append('files', file);
    }

    this.dataService.upload(formData).subscribe(
      event => {
        console.log(event);
        this.reportProgress(event);
      },
      error => {
        console.error(error);
      }
    );
}

Angular Service #

uploadFile(files: File) {
    const formData = new FormData();
    formData.append('files', files, files.name);
    const httpOptions = {
      headers: new HttpHeaders({
        'Content-Type': 'multipart/form-data'
      })
      
    };

    return this.http.post<any>(this.apiUrl2 + 'file/upload', formData, httpOptions);
}

错误原因分析 #

1. Service方法不匹配：组件调用dataService.upload(formData)，但Service定义的方法是uploadFile(files: File)，方法名、参数类型完全不匹配，导致请求无法正确发起。
2. 手动设置Content-Type错误：multipart/form-data请求需要自动生成的boundary分隔符，手动设置Header会丢失该参数，后端无法解析表单数据。
3. 表单默认提交冲突：submit按钮同时触发浏览器默认表单提交和Angular的uploadFile方法，导致请求重复或异常。
4. FileList遍历问题：selectedFiles是FileList对象，不是数组，直接for...of遍历可能存在兼容性问题。

修复方案 #

1. 修正Angular Service #

修改方法名与组件调用一致，移除手动设置的Content-Type：

upload(formData: FormData) {
    // HttpClient会自动处理multipart/form-data的Content-Type及boundary
    return this.http.post<any>(this.apiUrl2 + 'file/upload', formData);
}

2. 修正HTML表单 #

使用Angular的ngSubmit绑定上传方法，阻止默认提交行为，统一input的name与后端参数名：

<div class="upload-box">
  <form class="form-inline" (ngSubmit)="uploadFile($event)" enctype="multipart/form-data">
    <div class="form-group">
      <div class="icon">
        <i class="fa-solid fa-2x fa-file-arrow-up"></i>
        <p>Select your PDF file or drop it here</p>
      </div>
      <input class="select" type="file" class="form-control" id="pdfile" placeholder="file" accept="application/pdf" name="files" (change)="onSelectFile($event)" multiple>
    </div>
    <div class="button">
      <button class="submit" type="submit">Upload Pdf</button>
    </div>
  </form>
</div>

3. 修正Component TS代码 #

处理表单默认事件，将FileList转为数组确保遍历正常：

onSelectFile(event: any): void {
    this.selectedFiles = event.target?.files;
}

uploadFile(event: Event) {
    event.preventDefault(); // 阻止浏览器默认表单提交
    if (!this.selectedFiles || this.selectedFiles.length === 0) {
        console.log('No files selected.');
        return;
    }
    const formData = new FormData();
    // 将FileList转为数组遍历
    Array.from(this.selectedFiles).forEach(file => {
        formData.append('files', file);
    });

    this.dataService.upload(formData).subscribe(
        response => {
            console.log(response);
            this.reportProgress(response);
        },
        error => {
            console.error(error);
        }
    );
}

4. 额外检查项 #

• 确认Spring Boot Controller添加了@CrossOrigin注解，解决跨域问题；
• 验证请求URLthis.apiUrl2 + 'file/upload'与后端接口路径完全匹配；
• 确保后端存储目录存在且有读写权限，避免因文件写入失败导致500错误。

内容的提问来源于stack exchange，提问作者Nour Ben Hadj Abdallah