не могу закачать файл через formdata в angular 6

Question

Я использую angular для загрузки изображения, как показано в коде ниже.

Данные файла извлекаются из this.formGroup.value, однако проблема заключается в том, что когда данные этого файла передаются в formData, онОбнаружено, что formData по-прежнему пуста, поэтому невозможно отправить через http-запрос.Я не знаю, как решить эту проблему.Любая идея или другой способ?

    const formData: any = new FormData();
    formData.append("avatar", this.formGroup.value);
    console.log(formData);
    this.http.post(environment.baseUrl + '/api/users/picture',formData); 

Весь код показан ниже.

<form action="uploadUrl" [formGroup]="formGroup" method="post" enctype="multipart/form-data" (ngSubmit)="onSubmit()">
          <input type="file" name="avatar" />
         <button type="submit" [disabled]="formGroup.invalid || formGroup.prestine">Submit</button>

  onSubmit(){
    console.log('onSubmit',this.formGroup.value);
    const formData: any = new FormData();
    formData.append("avatar", this.formGroup.value);

    console.log(formData);   // the formData is empty


    this.http.post(environment.baseUrl + '/api/users/picture',formData); 
      .subscribe( res => {
          console.log(res);
      }, error => {
        console.log('changePicture error',error);
      });

  }

Answer 1

Лично я делаю это так:

Шаблон:

<input formControlName="picture" 
        (change)="onFileChange($event)"
        class="form-control" 
        type="file" 
        id="picture" 
        name="picture">

Компоненты:

onFileChange(event) {
  const file = event.target.files[0];
  this.formData.append('avatar', file, file.name);
   this.http.post(environment.baseUrl + '/api/users/picture',this.formData); 
  .subscribe( res => {
      console.log(res);
  }, error => {
    console.log('changePicture error',error);
  });

}

И я добавляю заголовок к моему http-запросу, чтобы разрешить данные формы:

headersConfig['enctype'] = 'multipart/form-data';