angular - 使用 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>使用 react 形式，它将返回一个带有"file"数组的对象。此数组的元素具有"file"类型。文件扩展了 Blob 接口(interface) [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 中设置了该名称。 -目的。

就是这样。

接受这个文件的 Controller 可能看起来像这样(在这个例子中: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