Téléchargement de fichier angular

Je suis débutant pour Angular, je veux savoir comment créer une partie de téléchargement de Angular-5 File , je suis en train d’essayer de trouver un tutoriel ou un document, mais je ne vois rien n’importe où, une idée pour cela? et je suis en train d’ essayer que ng4-files, mais cela ne fonctionne pas pour Angular-5

Voici un exemple de travail pour le téléchargement de fichiers vers api:

Étape 1: Modèle HTML (fichier-upload.component.html)

Définir une balise d’entrée simple de type file . Ajouter une fonction à (change) -event pour gérer le choix des fichiers.

 

Étape 2: Gestion du téléchargement dans TypeScript (file-upload.component.ts)

Définissez une variable par défaut pour le fichier sélectionné.

 fileToUpload: File = null; 

Créez la fonction que vous utilisez dans (change) -event de votre balise de saisie de fichier:

 handleFileInput(files: FileList) { this.fileToUpload = files.item(0); } 

Si vous voulez gérer la sélection multi-fichiers, vous pouvez parcourir ce tableau de fichiers.

Maintenant, créez une fonction de téléchargement de fichier en vous appelant file-upload.service:

 uploadFileToActivity() { this.fileUploadService.postFile(this.fileToUpload).subscribe(data => { // do something, if upload success }, error => { console.log(error); }); } 

Étape 3: Service de téléchargement de fichiers (file-upload.service.ts)

En téléchargeant un fichier via la méthode POST, vous devez utiliser FormData , car vous pouvez append un fichier à la requête http.

 postFile(fileToUpload: File): Observable { const endpoint = 'your-destination-url'; const formData: FormData = new FormData(); formData.append('fileKey', fileToUpload, fileToUpload.name); return this.httpClient .post(endpoint, formData, { headers: yourHeadersConfig }) .map(() => { return true; }) .catch((e) => this.handleError(e)); } 

Donc, c’est un exemple de travail très simple, que j’utilise tous les jours dans mon travail.

La méthode très simple et rapide consiste à utiliser ng2-file-upload .

Installez ng2-file-upload via npm.

Au premier module d’importation dans votre module.

 import { FileUploadModule } from 'ng2-file-upload'; Add it to [imports] under @NgModule: imports: [ ... FileUploadModule, ... ] 

Balisage:

  

Dans vos commentaires:

 import { FileUploader } from 'ng2-file-upload'; ... uploader: FileUploader = new FileUploader({ url: "api/your_upload", removeAfterUpload: false, autoUpload: true }); 

C’est l’utilisation la plus simple de ceci. Pour connaître tout le pouvoir de cette démo voir

Essaye ça

Installer

 npm install primeng --save 

Importer

 import {FileUploadModule} from 'primeng/primeng'; 

Html