无法使用Angular reactive表单发送多部分请求

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

@Component({
  selector: 'app-example',
  template: `
    <form (ngSubmit)="onSubmit()">
      <input type="file" (change)="onFileSelected($event)">
      <button type="submit">Submit</button>
    </form>
  `,
})
export class ExampleComponent {
  selectedFile: File | null = null;

  constructor(private http: HttpClient) {}

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

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

      this.http.post('https://api.example.com/upload', formData).subscribe(
        (response) => {
          console.log('Upload successful');
        },
        (error) => {
          console.error('Upload failed');
        }
      );
    }
  }
}