Comment utiliser angular2 de l'API http pour le suivi de charger/télécharger des progrès

Tho il y a beaucoup de adhoc bibliothèques de l'appui de charger/télécharger des progrès dans angular2, je ne sais pas comment faire natif angular2 de l'api http pour indiquer les progrès réalisés tout en faisant upload/download.

La raison pourquoi je veux utiliser http native api est parce que je veux utiliser

  1. http intercepteurs(API http wrappers) autour de native api http de valider, cache & enrichir le réel de la requête http envoyée comme cette & cette
  2. Outre angulaire http-api est beaucoup plus robuste que n'importe quel adhoc Api

Il est ce joli article sur comment télécharger/télécharger en utilisant angulaire de l'api http

Mais l'article mentionne qu'il n'est pas natif de façon à favoriser les progrès.

Quelqu'un at-il essayer d'utiliser l'api http pour afficher une barre de progression?

Si non, connaissez-vous un problème dans l'angle de repo pour cela?

  • Quelqu'un a demandé la fermeture de cette question en disant: c'est trop large. Eh bien, non. Quelqu'un a-utilisation angulaire de l'api http pour suivre les progrès?. Tout générique de l'API Http est censé être utilisé dans ce contexte. Son aussi spécifiques qu'une question peut obtenir.
InformationsquelleAutor Ashok Koyi | 2017-02-14
  1. 39

    Comme Angulaire 4.3.x et au-delà des versions, il peut être réalisé à l'aide de la nouvelle HttpClient de @angular/common/http.

    Lire la L'écoute des événements de progression section.

    Un Simple upload exemple (copié à partir de la section mentionnée ci-dessus):

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

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

    Et pour le téléchargement, il pourrait être quelque chose comme à peu près la même:

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

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

    Rappelez-vous dans le cas où vous êtes suivi d'un téléchargement, le Content-Length doit être réglé, sinon, il n'y a aucun moyen de le demander à être mesurée.

    • A fonctionné pour moi sur 4.1.x ainsi
    • R u bien sûr, il était 4.1.x? Non seulement dans package.json mais le récupéré a été ci-dessus?
    • Salut, je suis de l'événement.total non défini ne savez pas pourquoi ?
    • HttpClient } à partir de '@angulaire/common/http'; constructor(private http: HttpClient)
    • Je peux ajouter que lors de l'utilisation Angulaire 7.2.4, j'ai besoin de reportProgress: true et observe: 'events' pour voir la progression des événements. Seulement observe: 'events' ne fera pas le téléchargement des événements de progression, et en laissant de observe par défaut observe: 'body' qui retourne seulement le corps de la réponse et pas d'autres événements.
    InformationsquelleAutor Edmundo Rodrigues
  2. 3

    Je vous recommande d'utiliser le JavaScript natif XHR enveloppé comme un fait Observable, il est assez facile de créer votre propre site:

    upload(file: File): Observable<string | number> {

    let fd: FormData = new FormData();

    fd.append("file", file);

    let xhr = new XMLHttpRequest;

    return Observable.create(observer => {

        xhr.addEventListener("progress", (progress) => {

            let percentCompleted;

            //Checks if we can really track the progress
            if (progress.lengthComputable) {

                //progress.loaded is a number between 0 and 1, so we'll multiple it by 100
                percentCompleted = Math.round(progress.loaded /progress.total * 100);

                if (percentCompleted < 1) {
                    observer.next(0);
                } else {
                    //Emit the progress percentage
                    observer.next(percentCompleted);
                }
            }
        });

        xhr.addEventListener("load", (e) => {

            if (e.target['status'] !== 200) observer.error(e.target['responseText']);

            else observer.complete(e.target['responseText']);
        });

        xhr.addEventListener("error", (err) => {

            console.log('upload error', err);

            observer.error('Upload error');
        });

        xhr.addEventListener("abort", (abort) => {

            console.log('upload abort', abort);

            observer.error('Transfer aborted by the user');
        });

        xhr.open('POST', 'http://some-dummy-url.com/v1/media/files');

        //Add any headers if necessary
        xhr.setRequestHeader("Authorization", `Bearer rqrwrewrqe`);

        //Send off the file
        xhr.send(fd);

        //This function will get executed once the subscription
        //has been unsubscribed
        return () => xhr.abort()
    });
}

    Et c'est comment l'utiliser:

    //file is an instance of File that you need to retrieve from input[type="file"] element
const uploadSubscription = this.upload(file).subscribe(progress => {
    if (typeof progress === Number) {
        console.log("upload progress:", progress);
    }
});

//To abort the upload
//we should check whether the subscription is still active
if (uploadSubscription) uploadSubscription.unsubscribe();
    • Écrire ma propre version est quelque chose que je veux éviter & je l'ai mentionné pourquoi c'est le cas dans la question
    • Pour eg., votre exemple ne gère pas les désinscriptions à tous. Avec ce que je vais perdre les capacités d'interception qui valide & enrichit la demande de différentes manières avant l'envoi de la demande
    • Vous n'avez pas besoin de vous désabonner à partir de mon exemple de code. Nous appelons soit complete ou error dans tous les XHR événements, ceux-ci vont se désabonner automatiquement. Veuillez élaborer sur ce que tu veux dire avec la validation et l'enrichissement de la la demande. Angulaire http ne fournit pas cet au moment, regardez github.com/angular/angular/blob/master/modules/%40angular/http/.... Il est bytesLoaded et totalBytes mais cela n'a pas été utilisé partout.
    • Il suffit de regarder cela. github.com/1tontech/x-ng2-http-interceptor-demo
    • w.r.t complet/erreur, si l'utilisateur clique sur un onglet différent alors que la demande est envoyé (sa possible une application à avoir ce comportement naturel), l'utilisateur peut être demandé à une invite de commandes pour annuler la demande existante et de passer à l'cliqué sur la page. Dans ce cas, vous devez vous désabonner
    • vous êtes[étaient] à droite. Je suis tombé sur cette question aujourd'hui, j'ai mis à jour ma réponse à ajouter un "abandon" de la fonctionnalité.

    InformationsquelleAutor borislemke