使用 ngx-mat-file-input 从 Angular 上传文件 multipart/form-data

Question

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

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

Answer 1

如果您使用具有反应形式的 <ngx-mat-file-input>，它将返回一个带有 'files' 数组的对象。该数组的元素具有 'File' 类型。 File 扩展了 Blob 接口 [0][1]。 Blob 是您需要发送到服务器的内容。

第一步： 您必须将表单的结果包装在 FormData-Object [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 会 return 一个像 HttpHeaders#append 这样的新对象，但这里不是这种情况。 FormData#append returns void。因此你不能做 const formData = new FormData().append('file', file);!

第二步： 现在将 FormData-Object 传递给 HttpClient#post。

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

注意：服务器期望请求参数中的文件名为'file'，因为我们在FormData-Object.[=26]中设置了该名称=]

就是这样。

接受此文件的控制器可能如下所示（在此示例中：Java/Spring）。通常，它适用于接受表单多部分请求的每个控制器。

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

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

[1] Typescript 类型信息（由您IDE）

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

使用 ngx-mat-file-input 从 Angular 上传文件 multipart/form-data

Upload File as multipart/form-data from Angular with ngx-mat-file-input

file-upload

multipart

angular