angular文件上傳進度顯示

在本週，潘老師要求對文件上傳功能進行一下修改，要求彈出一個彈窗並顯示上傳進度，開始的時候想着還以爲這是個挺高級的功能，如今才發現前人又一次幫咱們鋪好了路。

通用實現

標題是angular，但先介紹的方法卻和angular無關，而是一個在js中均可以通用的方法——XMLHttpRequest。

XMLHttpRequest

XMLHttpRequest 對象用於在後臺與服務器交換數據。

XMLHttpRequest 對象是_開發者的夢想_，由於您可以：

• 在不從新加載頁面的狀況下更新網頁
• 在頁面已加載後從服務器請求數據
• 在頁面已加載後從服務器接收數據
• 在後臺向服務器發送數據

全部現代的瀏覽器都支持 XMLHttpRequest 對象。

關於它的詳細內容能夠查看這篇文檔，這裏就不在細說了。

XMLHttpREquest.upload.onprogress

回到正題，要實現文件上傳進度很簡單，upload.onprogress事件回調方法可用於跟蹤資源上傳的進度，它的event參數對象包含兩個重要的屬性loaded和total。分別表明當前已上傳的字節數（number of bytes）和文件的總字節數。既然知道了這兩個屬性，上傳進度，上傳速度等等不就均可以算出來了：

// 增長上傳過程事件
      xhr.upload.addEventListener('progress', (e: ProgressEvent) => {
      // lengthComputable屬性表明文件總大小是否可知。若是 lengthComputable 屬性的值是 false，那麼意味着總字節數是未知而且 total 的值爲零。
        if (e.lengthComputable) {
        // 上傳的百分比
          const percentage = Math.round((e.loaded * 100) / e.total);
          // 耗費的時間 ， time 是開始的時間
          const diff = new Date().getTime() - time;
          // 上傳的速度
          speed = Math.round(e.loaded / diff * 1000);
          // 剩餘時間
          eta = Math.ceil((e.total - e.loaded) / speed);
        }
      }, false);

注意事項

1.如果再瀏覽器的控制檯中 new 一個XHR對象，並使用點運算符，能夠發現有一個onprogress事件監聽器

雖然，這看着和咱們用到的差很少，但這可不是咱們須要的，

後者是用於加載資源時，而前者用於資源上傳時

2.測試的時候最好網速慢一點，或者文件大一些，否着可能會出現看不出效果，一來就是百分百，由於xhr.upload.onprogress在上傳階段(即xhr.send()以後，xhr.readystate=2以前)觸發，每50ms觸發一次。

ps: 網速能夠經過控制檯設置

angular實現

後來才發現angular已經給咱們封裝，總體上都是差很少的

upload(file: File) {  
  if (!file) {  
  return;  
 }  
 
  // 創造請求對象  
  // reportProgress 告訴 HttpClient 監聽並返回XHR progress events事件. 
  const req = new HttpRequest('POST', '/upload/file', file, {  
  reportProgress: true  
  });  
  
  // 產生一個 event 流  
  return this.http.request(req).subscribe((event: HttpEvent<{}>) => {  
  if (event.type === HttpEventType.UploadProgress) {  
   if (event.total > 0) {  
  // 計算上傳的百分比  
  const percent = event.loaded / event.total * 100;  
 } }  });

HttpEventType 是不一樣種類的 HttpEvent 的枚舉類型(官方解釋)

這是anular的官方demo能夠參考。