这是一个将文件上传到 api 的工作示例：

第 1 步：HTML 模板 (file-upload.component.html)

定义类型的简单输入标签file。向 -event添加一个函数来(change)处理选择文件。

<div class="form-group">
    <label for="file">Choose File</label>
    <input type="file"
           id="file"
           (change)="handleFileInput($event.target.files)">
</div>

第 2 步：TypeScript 中的上传处理 (file-upload.component.ts)

为选定的文件定义一个默认变量。

fileToUpload: File | null = null;

创建您在(change)文件输入标签的事件中使用的函数：

handleFileInput(files: FileList) {
    this.fileToUpload = files.item(0);
}

如果要处理多文件选择，则可以遍历此文件数组。

现在通过调用 file-upload.service 创建文件上传功能：

uploadFileToActivity() {
    this.fileUploadService.postFile(this.fileToUpload).subscribe(data => {
      // do something, if upload success
      }, error => {
        console.log(error);
      });
  }

第 3 步：文件上传服务 (file-upload.service.ts)

通过 POST 方法上传文件，您应该使用FormData，因为这样您就可以将文件添加到 http 请求。

postFile(fileToUpload: File): Observable<boolean> {
    const endpoint = 'your-destination-url';
    const formData: FormData = new FormData();
    formData.append('fileKey', fileToUpload, fileToUpload.name);
    return this.httpClient
      .post(endpoint, formData, { headers: yourHeadersConfig })
      .map(() => { return true; })
      .catch((e) => this.handleError(e));
}

所以，这是一个非常简单的工作示例，我每天都在工作中使用它。