Angular - Получить файл из NgForm в TS, а не из html

Question

Я пытаюсь получить файл ввода с именем Avatar в файле ts, не используя функцию непосредственно из html, я имею в виду. Теперь у меня это выглядит так:

<input type="file" name="avatar" placeholder="Avatar" ngControl="avatar" ngModel (change)="file2Base64($event, 'avatar')">

, но я хотел бы иметь возможность стереть (изменить) вызов функции, так как он асинхронный, и мне нужно вызвать его внутри другой функции, которая отправляет формы со следующей строкой, используя viewChild.

@ViewChild('frmRegister',{static:true}) registerform: NgForm;

this.file2Base64(this.registerform.value.avatar.target.files[0],"avatar");

Однако, она выдает: ERROR TypeError: Невозможно прочитать свойство 'files' undefined, поэтому мне интересно, как я могу ссылаться на это поле формы в чтобы захватить файл.

РЕДАКТИРОВАТЬ:

У меня сейчас так:

onRegister(form):void{
//code
this.file2Base64(form.value.avatar,"avatar");

Просто возвращает "C: \ fakepath \ image.png ", и если я пытаюсь использовать form.value.avatar.target.files [0], он возвращает ошибку как неопределенную.

Answer 1

Попробуйте использовать данные формы для передачи двоичных файлов. Используя FormData,

 formData: FormData = new FormData();
 selectedFile: any;

 file2Base64(event){
    const file = event.target.files;
    if (file && file[0]) {
      var reader = new FileReader();
      reader.onload = () => {
       const imgSrc = reader.result;  
      };
      this.selectedFile = reader.readAsDataURL(file[0]);
     }
  }

    onRegister(form : NgForm):void{
      this.formData.append("avatar", this.selectedFile ? this.selectedFile : '');
 }