Question

我正在使用ngx-mat-file-input [0]从用户那里检索文件输入，我想将其上传到服务器。端点需要一个多部分文件。我该怎么办？

[0] https://www.npmjs.com/package/ngx-material-file-input

Answer 1

如果您以反应形式使用<ngx-mat-file-input>，它将带给您带有“文件”数组的对象。该数组的元素的类型为“文件”。文件扩展了Blob接口[0] [1]。您需要将Blob发送到服务器。

第一步：您必须将表单的结果包装在FormData-对象[2]中。

<!-- Minimal form -->
<form *ngIf="fileForm" [formGroup]="fileForm">
    <ngx-mat-file-input formControlName="file"></ngx-mat-file-input>
</form>

// the handler, e.g. if user presses "upload"-button
const file_form: FileInput = this.fileForm.get('file').value;
const file = file_form.files[0]; // in case user didn't selected multiple files

const formData = new FormData();
formData.append('file', file); // attach blob to formdata / preparing the request

通知：您可能希望.append返回一个新的对象，如HttpHeaders#append，但这不是这种情况。 FormData#append返回void。因此，您无法const formData = new FormData().append('file', file);！

第二步：现在将FormData对象传递到HttpClient#post。

this.http.post<void>('/upload', formData).subscribe(() => {
  // worked
}, err => {
  console.error(err);
});

通知：服务器希望在请求参数“ file”中包含该文件，因为我们在FormData-Object中设置了该名称。

就是这样。

接受此文件的控制器可能看起来像这样（在此示例中为Java / Spring），但这是所有可以接受表单多部分请求的服务器的通用解决方案。

@PostMapping("/upload")
public void upload(@RequestParam("file") MultipartFile file) {}

[0] https://developer.mozilla.org/de/docs/Web/API/File

[1]打字稿类型信息（通过您的IDE）

[2] https://developer.mozilla.org/de/docs/Web/API/FormData

使用ngx-mat-file-input从Angular上载文件作为多部分/表单数据

1 个答案: