невозможно загрузить изображение в конечную точку API с угловой 6 реактивной формой

Question

Я использую Angular 6 и Reactive Form

Мне нужно загрузить изображение аватара пользователя, и для этого я создал компонент изменения аватара со следующим содержимым.

import {Component, OnInit, ViewChild} from '@angular/core';
import {AccountService} from '../account.service';
import {FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms';

@Component({
  selector: 'app-change-avatar-modal',
  templateUrl: './change-avatar-modal.component.html',
  styleUrls: ['./change-avatar-modal.component.css']
})
export class ChangeAvatarModalComponent implements OnInit {

  changeAvatarForm: FormGroup;

  @ViewChild('avatar') User_Avatar;
  userAvatarFile: File;

  constructor(
    private accountService: AccountService,
    private formBuilder: FormBuilder
  ) { }

  ngOnInit() {
    this.changeAvatarForm = this.formBuilder.group({
      avatar: new FormControl('', [
        Validators.required
      ])
    });
  }

  get f() {
    return this.changeAvatarForm.controls;
  }

  onSubmit() {
    const image = this.User_Avatar.nativeElement;
    if (image.files && image.files[0]) {
      this.userAvatarFile = image.files[0];
    }
    const avatarFile: File = this.userAvatarFile;
    console.log(avatarFile);

    const formData: FormData = new FormData();
    formData.append('avatar', avatarFile, avatarFile.name);

    console.log(formData);
    const data = {'avatar': formData};

    this.accountService.changeAvatar(data).subscribe(
      res => {
        console.log(res);
      }
    );
  }

}

и в файле шаблона

<form [formGroup]="changeAvatarForm" #formDir="ngForm" method="post" (submit)="onSubmit()">

    <input type="file" class="form-control" id="input-avatar" formControlName="avatar" #avatar>
    <button type="submit">Change Avatar</button>

</form>

Но когда я отправляю data, используя POST к конечной точке API.Он отправляет пустое поле avatar.

Даже полезная нагрузка запроса не содержит данных.

Answer 1

Вы можете передавать только данные формы.

onSubmit() {
const image = this.User_Avatar.nativeElement;
if (image.files && image.files[0]) {
  this.userAvatarFile = image.files[0];
}
const avatarFile: File = this.userAvatarFile;
console.log(avatarFile);

const formData: FormData = new FormData();
formData.append('avatar', avatarFile, avatarFile.name);

console.log(formData);

this.accountService.changeAvatar(formData).subscribe(
  res => {
    console.log(res);
  }
);

}

Answer 2

FileUpload В реактивной форме вам нужно использовать $ event для получения содержимого файла

Ссылка: https://medium.com/@amcdnl/file-uploads-with-angular-reactive-forms-960fd0b34cb5

@ Компонент ({ шаблон: <form [formGroup]="formGroup" novalidate (ngSubmit)="onSubmit()"> <input type="file" (change)="onFileChange($event)" /> <button type="submit" [disabled]="formGroup.invalid || formGroup.prestine">Submit</button> </form> }) экспортный класс PizzaComponent {

  formGroup = this.fb.group({
    file: [null, Validators.required]
  });

  constructor(private fb: FormBuilder, private cd: ChangeDetectorRef) {}

  onFileChange(event) {
    const reader = new FileReader();

    if(event.target.files && event.target.files.length) {
      const [file] = event.target.files;
      reader.readAsDataURL(file);

      reader.onload = () => {
        this.formGroup.patchValue({
          file: reader.result
       });

        // need to run CD since file load runs outside of zone
        this.cd.markForCheck();
      };
    }
  }

}

Answer 3

Вам необходимо прочитать содержимое файла, другими словами, ваша переменная avatarFile является просто дескриптором выбранного файла, вы должны прочитать байты из дескриптора файла, который вы получили, чтобы получить фактические данные файла, используя FileReader вроде так

onSubmit() {
  const image = this.User_Avatar.nativeElement;
  if (image.files && image.files[0]) { 
    this.userAvatarFile = image.files[0]; 
  }
  const avatarFile: File = this.userAvatarFile;

  const fileReader = new FileReader();
  // Do your stuff only after you are done reading the file content
  // Reading starts after this block
  fileReader.onload = () => {
    console.log(avatarFile); 
    const formData: FormData = new FormData(); 
    formData.append('fileName', avatarFile.name);
    // Edited here
    formData.append('fileData', new Blob([new Int16Array(fileReader.result)], {type: 'arraybuffer'});
    console.log(formData);
    const data = {'avatar': formData}; 
    this.accountService.changeAvatar(data)
                       .subscribe(res => { 
                         console.log(res); 
                       });
  };

  // Now actually start reading the file
  fileReader.readAsArrayBuffer(avatarFile);
}