web-dev-qa-db-ja.com

アップロード/ダウンロードの進行状況を追跡するためにangle2 http APIを使用する方法

Angle2のアップロード/ダウンロードの進行状況をサポートするアドホックライブラリが多数あるため、アップロード/ダウンロード中に進行状況を表示するためにネイティブのangular2 http apiを使用する方法がわかりません。

ネイティブHTTP APIを使用する理由は、利用したいためです。

  1. this ＆ this など、送信される実際のhttp要求を検証、キャッシュ、および強化するネイティブHTTP APIのhttpインターセプター（http APIラッパー）
  2. Angularのhttp APIは、アドホックAPIよりもはるかに堅牢です。

この素敵な記事 アンギュラーのHTTP APIを使用してアップロード/ダウンロードを行う方法について

しかし、この記事では、進歩をサポートするネイティブな方法はないと述べています。

進行状況を表示するためにhttp apiを使用してみましたか？

そうでない場合、このためのangularリポジトリで問題を知っていますか？

httpangularinterceptorangular2-http
18
Ashok Koyi

Angular 4.3.x以降のバージョンのように、新しい HttpClient from @angular/common/http。

進捗イベントのリスニング セクションを読んでください。

簡単なアップロードの例（上記のセクションからコピー）：

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

ダウンロードについては、ほぼ同じようなものになるかもしれません。

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

ダウンロードを監視している場合は、Content-Lengthを設定する必要があります。設定しないと、リクエストを測定する方法がありません。

40
Edmundo Rodrigues

ObservableとしてラップされたネイティブJavaScript XHRを使用することをお勧めします。独自に作成するのはかなり簡単です。

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()
    });
}

そして、これはそれを使用する方法です：

// 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();
3
borislemke