接受来自 Angular 的 List<MultipartFile> 文件

Question

我在将多个文件从 angular 前端发送到 spring-boot 后端时遇到问题。我已经尝试了堆栈和网络中的所有内容，但我找不到答案。这是我的代码：

角度： .ts 文件：

  submit(){
    this.uploadedFiles = this.uploadedFiles.map(item => {
      let formData = new FormData();
      return formData.append('file',item,item.name);
    });
    this.service.postFile(this.uploadedFiles).subscribe(result => {
      console.log(result);
    })
  }

this.uploadedFiles 以某种方式未定义 FormData 类型？

服务文件：

postFile(files: any): Observable<string>{
      return this.http.post('/id/file', files, {responseType:'text'});
  }

弹簧控制器：

    @PostMapping(value = "/file")
private String newFile(@RequestBody List<MultipartFile> mf) {
    return "error";
}

在调试器内部，mf 列表为 null。

主要问题是对于 1 个文件（当我只使用 MultipartFile 时），我的代码可以正常工作。

我正在使用 PrimeNG 的 p-fileupload 和自定义上传事件。

Answer 1

我认为问题在于您将FormData 实例的数组发送到postFile，因为您在map 内一次又一次地实例化formData。

试试看是否可行：

submit() {
  const formData = new FormData();
  this.uploadedFiles = this.uploadedFiles.map(item => formData.append('file', item, item.name));
  this.service.postFile(this.uploadedFiles).subscribe(result => console.log(result));
}

PS：我没有对此进行测试，但我觉得它应该可以工作。

更新：

我认为您正在将 formData 记录到控制台，如下所示：

console.log(files);

在您的 postFile 方法中。

或者：

console.log(formData);

在您的组件中。

你应该做的是

console.log(formData.get('file'));