angular - 从系统上传 xml 文件并将其发送到请求正文中的 api（以 JSON 格式）

Question

有人可以指导我如何从我的 Angular UI 上传 XML 文件作为输入，并将其以 JSON 格式在请求正文中发送到我的反手 post API。我正在使用 Angular 10 版本

标签： angular

Answer 1

第 1 步：HTML

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

第 2 步：组件

  handleFileInput(files: FileList) {
        let fileToUpload = files.item(0);
       this.fileUploadService.postFile(fileToUpload ).subscribe(data => {
      // do something, if upload success
      }, error => {
        console.log(error);
      });
}

第 3 步： 创建服务以进行后调用添加以下代码

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));
}