Как загрузить фаил в апи?

Question

[Romanuss]

Привет всем, есть проблема:
Пытаюсь вставить массив фоток в FormArray:
фрагменты из компонента:

public formData = this.fb.group({
        images: this.fb.array([])
    });

detectFiles(event) {
        if (event.target.files.length > 0) {
            this.formData.get('images').setValue(event.target.files);
            }

        console.log(this.formData.get('images'))
    }

Код из html:

<input
                             type="file" 
                             class="custom-file-input form-control" 
                             id="files" 
                             multiple 
                             (change)="detectFiles($event)" 
                             accept="image/x-png,image/jpeg"/>

Выскакивает ошибка
description-page.component.html:44 ERROR TypeError: value.forEach is not a function

Как можно загрузить фаил в FormArray?

Answer 1

[Антон Швец]

event.target.files имеет тип FileList и у него конечно нет forEach, это не массив. Массив можно сделать через Array.from
Вы зачем-то пытаетесь список файлов в форму засунуть. В чем конечная цель этого действа?
Ангуляр формы не умеют из коробки работать с файлами и в большинстве случаев этого не нужно.

Comments

[Romanuss]

Ну мне нужно послать фаил(ы) картинок в API, через ПОСТ запрос. В пост запросе нужно сделать переменную images: [список фаилов]

[Антон Швец]

Romanuss, а что там должно быть? массив блобов в base64?
файл конвертится в строку примерно так

private convertFileToBase64String(file: File): Observable<string> {
    return new Observable(observer => {
      const reader = new FileReader();
      reader.readAsBinaryString(file);
      reader.onload = () => {
        observer.next(btoa(reader.result as string));
        observer.complete();
      };
    });
  }

[Антон Швец]

Romanuss, в итоге типа такого https://ng-run.com/edit/FYr55Z29IRoF0PbZhtOE