web-dev-qa-db-fra.com

Pourcentage de progression de téléchargement de fichier angulaire

Dans mon application que je développe dans Angular 4, l'utilisateur peut télécharger des fichiers en plusieurs parties sur le serveur. Les fichiers sont gros. J'ai besoin de montrer la progression actuelle du processus de téléchargement de fichier avec son pourcentage par utilisateur, comment puis-je le faire?

Merci d'avance!

angularfilefile-uploadmultipart
7
komron

Puisque vous utilisez Angular4, vous pouvez utiliser des événements Listening to progress à l'aide du nouveau HttpClient à partir de @angular/common/http..

Ajout de code à partir de la documentation,

const req = new HttpRequest('POST', '/upload/file', file, {
  reportProgress: true,
});

et alors,

http.request(req).subscribe(event => {
  // Via this API, you get access to the raw event stream.
  // Look for upload progress events.
  if (event.type === HttpEventType.UploadProgress) {
    // This is an upload progress event. Compute and show the % done:
    const percentDone = Math.round(100 * event.loaded / event.total);
    console.log(`File is ${percentDone}% uploaded.`);
  } else if (event instanceof HttpResponse) {
    console.log('File is completely uploaded!');
  }
});

EDIT Étant donné que OP souhaitait l'utiliser avec angular2, vous devez utiliser du code JavaScript XHR natif intégré sous la forme Observable, comme indiqué dans ce answer

19
Sajeetharan

Vous pouvez facilement y parvenir avec:

npm i angular-progress-http

Après avoir importé le module, vous pouvez maintenant ajouter ci-dessous celui-ci à votreapp.module.tsou à l'endroit où vous empilez vos modules d'application dans votre application.

Vous allez importer ceci (dans app.module.ts):

import { HttpModule } from '@angular/http';

import { ProgressHttpModule } from 'angular-progress-http';

Toujours dans votre app.module.ts

à @NgModule

@NgModule({

  imports: [

    HttpModule,

    ProgressHttpModule
  ]
})

Ensuite, dans votre fichier de composant (Whatever.component.ts), où vous voulez l'utiliser. Vous pouvez placer ceci:

import { ProgressHttp } from 'angular-progress-http';

Alors implémentez comme ceci:

constructor(private http: ProgressHttp) {}
    onSubmit(): void {
        const _formData = new FormData();
        _formData.append('title', this.title);
        _formData.append('doc', this.doc);

        this.http.withUploadProgressListener(progress => { console.log(`Uploading ${progress.percentage}%`); })
        .withDownloadProgressListener(progress => { console.log(`Downloading ${progress.percentage}%`); })
        .post('youruploadurl', _formData)
        .subscribe((response) => {
            console.log(response);
        });
    }
1
tolulope owolabi

utilisez la bibliothèque angular-loading-bar. Si vous ne souhaitez pas utiliser la bibliothèque angular-loading-bar, vous pouvez utiliser le rappel de progression eq-xhrrequest.upload.onprogress.

0
k.prerna