Как отправить изображения в поля формы группы?

Question

У меня есть группа форм, в которую мне нужно отправить два изображения в поля profile_pic и banner_pic. Тем не менее, при всех способах отправки сервер возвращает мне сообщение об ошибке, в котором говорится, что значения, введенные в поля, должны иметь тип file.

handleBanner(file: File) {
    this.fileBanner = file;
    const reader = new FileReader();
    reader.onload = (event: any) => {
       this.eventForm.patchValue({
        banner_pic: reader.result
     });

     this.urlPreviewBanner = event.target.result;
    }
     reader.readAsDataURL(file); 
}

<div class="col s1">
            <label for="selecionarFotoBannerEvento" style="cursor:pointer;">
              <img [src]="urlPreviewBanner"
                   alt=""
                   class="responsive-img"
                   width="800"/>
            </label>
          </div>
          <div class="col s9">
            <label for="selecionarFotoBannerEvento" style="cursor:pointer;">
              <p class="titulo-selecao-foto">&nbsp; Adicionar banner do evento</p>
              <p class="legenda">Recomendado imagens com tamanho 800x150.</p>
              <input formControlName="banner_pic" name="bannerHidden" type="hidden">
              <input 
                     (change)="handleBanner($event.target.files[0])"
                     type="file"
                     accept="image/*"
                     id="selecionarFotoBannerEvento"
                     style="display: none"/>
            </label>
          </div>
        </div>

В настоящее время я могу отображать изображение в режиме предварительного просмотра, но на момент отправки ответа сервер по-прежнему заявляет, что значения должны быть типа файла.

Answer 1

Здесь у меня есть грубый пример, который отправляет изображение сюда: https://github.com/dedd1993/angular-cms/blob/master/src/app/pages/clients/client-form/client-form.component.ts.

<div>
    <img class="preview-image" [src]="imageFile ? imageFile.link : 'localhost/image.png'">
    <button type="button" onclick="document.querySelector('#exampleInputFile').click()"></button>
    <input type="file" id="exampleInputFile" (change)="imagesPreview($event)" style="display: none;">
</div>

@Component({
    selector: 'app-form',
})
export class FormComponent implements OnInit {
    imageFile: {link: string, file: any, name: string};

    constructor(){ }

    imagesPreview(event) {
        if (event.target.files && event.target.files[0]) {
            const reader = new FileReader();

            reader.onload = (_event: any) => {
                this.imageFile = {
                    link: _event.target.result,
                    file: event.srcElement.files[0],
                    name: event.srcElement.files[0].name
                };
            };
            reader.readAsDataURL(event.target.files[0]);
        }
    }

    save(): void {
        const formData = new FormData();
        formData.append('myImageToSend', this.imageFile.file);
        formData.append('title', 'Set your title name here');
        formData.append('description', 'Set your title description here');

        this.clientService.create(formData).subscribe(data => {});
    }
}

Answer 2

HTML-компонент

     <form [formGroup]="controleForm" (submit)="upload()">
      <input   #fileInput    formControlName="image" type="file">
      <input   formControlName="user" type="file">
      <button   type="submit" > Send </button>
     </form>

Компонент TS

export class UploadComponent implements OnInit {

          @ViewChild("fileInput") fileInput;

          pointControleFilter: FormGroup;
          constructor(private _http: HttpClient) {}

          ngOnInit() {
            this.controleForm = new FormGroup({
              nom: new FormControl('', [Validators.required])    
           });
          }

      upload()
      {
        const formData = new FormData();
        formData.append('nom', this.controleForm.get('nom').value);
        formData.append('image', this.fileInput.nativeElement.files[0]);
        this._http.post('url' , formData).subscribe((res)=>{
           /* if all is ok */
           Console.log('image has been sent')
         });
      }
    }

Answer 3

Я думаю, что атрибут formControlName необходимо переместить в другой тег input.

        <label for="selecionarFotoBannerEvento" style="cursor:pointer;">
          <p class="titulo-selecao-foto">&nbsp; Adicionar banner do evento</p>
          <p class="legenda">Recomendado imagens com tamanho 800x150.</p>
          <input name="bannerHidden" type="hidden">
          <input formControlName="banner_pic"
                 (change)="handleBanner($event.target.files[0])"
                 type="file"
                 accept="image/*"
                 id="selecionarFotoBannerEvento"
                 style="display: none"/>
        </label>