如何在Angular中修补反应式形式的图像场？

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-image-upload-form',
  templateUrl: './image-upload-form.component.html',
  styleUrls: ['./image-upload-form.component.css']
})
export class ImageUploadFormComponent {
  imageForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.imageForm = this.fb.group({
      image: ['', Validators.required]
    });
  }

  onFileChange(event) {
    const file = event.target.files[0];
    if (file) {
      const reader = new FileReader();
      reader.onload = () => {
        this.imageForm.get('image').setValue(reader.result);
      };
      reader.readAsDataURL(file);
    }
  }

  onSubmit() {
    if (this.imageForm.valid) {
      console.log(this.imageForm.value);
      // 这里可以添加上传文件到服务器的逻辑
    }
  }
}

<form [formGroup]="imageForm" (ngSubmit)="onSubmit()">
  <input type="file" (change)="onFileChange($event)" formControlName="image" />
  <button type="submit" [disabled]="!imageForm.valid">Submit</button>
</form>