1
votes

Comment envoyer des images dans les champs d'un groupe de formulaires?

J'ai un groupe de formulaires dans lequel je dois envoyer deux images dans les champs profile_pic et banner_pic. Cependant, de toutes les manières qu'ayant envoyé le serveur me renvoie un message d'erreur indiquant que les valeurs saisies dans les champs doivent être de type fichier.

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>

Actuellement je peux afficher l'image en aperçu mais à au moment de la soumission de la réponse, le serveur continue de déclarer que les valeurs doivent être du type de fichier.

typescript angular angular-reactive-forms reactive-forms

0 commentaires

3 Réponses :

0
votes

Je pense que l'attribut formControlName doit être déplacé vers une autre balise 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>

0 commentaires

0
votes

Ici, j'ai un exemple grossier qui envoie une image ici: https://github.com/dedd1993/angular-cms/blob/master/src/app/pages/clients/client-form/client-form.component .ts .

@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 => {});
    }
}

<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>

2 commentaires

O problema é que eu tenho que enviar duas imagine em um objeto. Sua solução funciona para enviar apenas imagens, mas não é válida quando a imagem faz parte do formulário.

Vous pouvez ajouter des données à un formulaire avec d'autres champs comme l'identifiant, le titre, la description, etc. Ce formulaire sera envoyé à votre API comme un formulaire HTML normal avec un formulaire d'envoi et d'action ... J'ai mis à jour ma réponse, vérifiez-le .

0
votes

Composant HTML

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')
         });
      }
    }

Composant TS

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

0 commentaires