Comment télécharger un fichier par formulaire submit dans angular2?

Comment puis-je télécharger un fichier par formulaire submit dans angular2. Je veux utiliser ng2-file-upload bibliothèque. Mais je ne suis pas capable de l'utiliser dans un formulaire. Quelqu'un peut-il m'aider s'il-vous-plaît?Comment télécharger un fichier par formulaire submit dans angular2?

Source

2016-12-12 Md. Sahidul Islam

Que voulez-vous dire par "Je ne suis pas capable", des erreurs? Avez-vous regardé la démo (http://valor-software.com/ng2-file-upload/)? – Akkusativobjekt

Je veux cliquer sur le bouton de soumission de formulaire et je veux soumettre toutes les données avec image/fichier à backend. Comment puis-je faire ceci? @Akkusativobjekt –

Il devrait être possible en passant simplement le fichier téléchargé dans votre méthode qui peut être appelé dans soumettre.

Dans votre HTML

<form #sieFileUploadForm="ngForm"> 
    <input type="file" id="fileItem" 
    value="Browse...">

En vous ts

uploadFile(file){ 
console.log(file) 
}

Note: - lors de l'envoi de vous beckend besoin de faire formData comme ce

uploadFile(file){ 
let formData = new FormData(); 
formData.append('FILENAME', file); 
}

Source

2016-12-12 14:51:53

En fait, vous avez seulement besoin d'un champ de saisie avec la directive ng2FileSelect et d'une liaison à l'uploader, par exemple [uploader] = "uploader". Un bouton supplémentaire qui appelle la méthode ulpoad() et vous avez terminé. Il n'est pas nécessaire de créer un objet FormData, AFAIK. – Akkusativobjekt

Je souhaite soumettre les données d'autres champs en cliquant sur le bouton Soumettre le formulaire. –

Oui, vous devriez être en mesure de le faire comme je l'ai mentionné, il suffit de transmettre les données à la méthode! –

Donc, enfin, je comprends votre problème, ce qui semble être formdata supplémentaires que vous souhaitez envoyer avec le fichier. Après avoir créé votre FileUploader, vous pouvez ajouter forme supplémentaire avec le code suivant:

uploader: FileUploader = new FileUploader({ url: "http://localhost/upload.php" }); 

    constructor() { 
    this.uploader.onBuildItemForm = (item, form) => { 
     form.append("key1", "value1"); 
     form.append("key1", "value2"); 
    }; 
}

Certains disent qu'il est un peu plus joli de mettre ce code dans le ngOnInit(), mais je ne veux pas enfler ce code et cette décision n'est pas très importante ici. Ensuite, vous pouvez inspecter les données de poste supplémentaires dans la charge utile de la publication http, par exemple avec les outils de développement de Firefox. Ils devraient ressembler à:

-----------------------------110224700718602891206418821 
Content-Disposition: form-data; name="key1" 

value1 
-----------------------------110224700718602891206418821 
Content-Disposition: form-data; name="key1" 

value2

(Votre limite ne sera pas la même chose)

J'ai trouvé le solution sur le suivi GitHub du projet.

Source

2016-12-14 14:56:13 Akkusativobjekt

Comment télécharger un fichier par formulaire submit dans angular2?

Répondre

Questions connexes