web-dev-qa-db-fra.com

Angular 5 comment obtenir le nom de fichier à partir de l'entrée avec type = file

Je sais qu'il y a des questions similaires, mais aucune ne couvre la méthode pour Angular 5 ou du moins pas d'une manière que je comprends).

Pour mon système de téléchargement d'images, j'ai besoin de savoir si une image est attachée à la balise d'entrée et quel nom a le fichier. Voici mon code:

HTML:

<input 
  type="file" 
  [(ngModel)]="currentInput"
  (change)="onFileSelected($event)"
>

Angulaire:

export class ImageUpload {
    currentInput;

    onFileSelected(event) {
        console.log(this.currentInput);
    }
}

Peu importe s'il y a un fichier joint ou non, la valeur dans "currentInput" est toujours indéfinie. Comment cela fonctionne-t-il avec l'entrée lorsque le type est égal à "fichier"?

Merci!

angularimageinputngmodel
6
Miger

Donnez un nom au champ de saisie, c'est une exigence: https://angular.io/guide/forms#!#ngModel . Vous avez également défini la fonction en dehors de la classe. la fonction et la propriété doivent toutes deux être à l'intérieur d'une classe.

Mise à jour: La liaison de données n'est pas prise en charge avec les types d'entrée de fichier. Cela doit être fait en utilisant du javascript pur.

<input 
  type="file" 
  name = "currentInput"
  [(ngModel)]="currentInput"
  (change)="onFileSelected($event)"
>

export class ImageUpload {
  currentInput:any;
  onFileSelected(event) {
    console.log(event.target.files);
    this.currentInput = event.target.files; 
  }
}
0
Komal