Как использовать angular2 http API для отслеживания процесса загрузки/скачивания

Question

Есть много библиотек adhoc, поддерживающих загрузку/загрузку в угловом2, я не знаю, как это сделать, используя native angleular http http api, чтобы показать прогресс при загрузке/загрузке.

Причины, почему я хочу использовать родной HTTP API, потому что я хочу использовать

1. HTTP-перехватчиков (HTTP API обертки) вокруг родной HTTP API, который Validate, кэш & обогащают фактический запрос HTTP посылается такими в this & this
2. Помимо HTTP API угловом является гораздо более надежным, чем любые ADHOC API,

Существует this nice article о том, как сделать загрузку/загрузку с помощью углового http api

Но в статье упоминается, что нет никакого родного способа поддержки прогресса.

Кто-нибудь пытался использовать http api для показа прогресса?

Если нет, вы знаете проблему в угловом репо для этого?

Answer 1

Начиная с версии Angals 4.3.x и выше версий, ее можно достичь, используя новый HttpClient от @angular/common/http.

Прочитать Listening to progress events раздел.

Простой пример загрузки (скопировать из упомянутого выше):

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

Помните, в случае, если вы» чтобы отслеживать загрузку, необходимо установить , в противном случае невозможно измерить запрос.

Answer 2

Я хотел бы предложить использовать родной JavaScript XHR завернутые как Observable, это довольно легко создать самостоятельно:

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