面试题：Angular中HttpClient模块文件上传的基础实现

Question

在Angular项目中，简要描述如何使用HttpClient模块实现简单的文件上传功能，包括HTML模板部分以及组件中处理文件上传的代码逻辑。

Answer 1

HTML模板部分

<input type="file" (change)="onFileSelected($event)">
<button (click)="uploadFile()">上传文件</button>

组件代码逻辑

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-file-upload',
  templateUrl: './file-upload.component.html'
})
export class FileUploadComponent {
  selectedFile: File | null = null;

  constructor(private http: HttpClient) {}

  onFileSelected(event: any) {
    this.selectedFile = event.target.files[0];
  }

  uploadFile() {
    if (this.selectedFile) {
      const formData = new FormData();
      formData.append('file', this.selectedFile, this.selectedFile.name);

      this.http.post('your-upload-url', formData).subscribe(
        response => {
          console.log('文件上传成功', response);
        },
        error => {
          console.error('文件上传失败', error);
        }
      );
    }
  }
}