JavaScript實現監控上傳和下載進度

Posted on by

一、寫在前面

網路的不穩定性，網速的變化，會導致有時一個請求可能需要很長的的時間，而這個過程如果沒有相應的提示，讓用戶感知進度，這可能是一種糟糕的體驗。這在體現請求進度，加載進度的需求，在文件上傳下載業務中，更為強烈。

下面從 XHR 請求和 axios 兩個角度，分析如何實現監控請求進度，獲取文件上傳下載進度。

tips：上傳下載進度監控，不應僅僅是數據傳輸進度比的獲取，還應包括傳輸過程可能出現的狀態。

二、xhr 監控進度

XHR 的出現，在 web應用發展歷史上是具有裡程碑意義的，它使得 DHTML 的 D 更加真實。此外，ajax 和 axios 本質上也是一種對 XHR 的封裝實現。在 js 中我們無須依賴第三方插件，就可以實現異步請求，因為有 XHR（new XMLHttpRequest()），這有時很有用。所以，幾遍在項目中可能很少再使用 XHR，而是使用它的某種實現，例如 axios 或 ajax，瞭解 XHR 也是有意義的。

XHR 在監控請求進度上，其實提供瞭方便的API，下面是和 XHR 進度相關的事件：

事件類型 說明 觸發次數
loadstart 接收到響應數據時觸發。 1次
progress 當請求接收到更多數據時，周期性地觸發 0或多次
error 當 request 遭遇錯誤時觸發。 0或多次
abort 當 request 被停止時觸發，例如當程序調用 XMLHttpRequest.abort() 時。 0或多次
load XMLHttpRequest請求成功完成時觸發。 0或多次
loadend 當請求結束時觸發, 無論請求成功 ( load) 還是失敗 (abort 或 error)。 1次

上面的事件就可以方便用於監控請求進度，請求狀態，progress 可能更為常用，這常常結合進度回調的 event.loaded 和 event.total， 來獲取進度的百分比。

①使用 XHR 監控下載進度示例：

  let xhr = new XMLHttpRequest();
  // 要監控請求進度，可以在 xhr 對象上註冊進度相關的事件
  // 每個請求，開始都會觸發 loadStart，結束都會觸發 loadEnd 事件，它們之間，
  // 還可能會觸發一個或多個其他事件，有些事件可能會多次觸發。
  xhr.addEventListener("progress", updateProgress);
  xhr.addEventListener("load" , transferComplete);
  xhr.addEventListener("error", transferFailed  );
  xhr.addEventListener("abort", transferCanceled);
  xhr.open();
  // 服務端到客戶端的傳輸進程（下載）
  function updateProgress (event) {
    // 如果 `lengthComputable` 屬性的值是 false，那麼意味著總字節數是未知並且 total 的值為零。
    if (event.lengthComputable) {
      let progress = event.loaded / event.total * 100;
      console.log('加載進度：' + progress + '%') // 一個百分比進度
    } else {
      // 總大小未知時不能計算進度信息
    }
  }
  function transferComplete(event) {
    console.log("傳輸完成");
  }
  function transferFailed(event) {
    console.log("傳輸失敗");
  }
  function transferCanceled(event) {
    console.log("該請求已經被取消");
  }
  // ...其他內容

tips：註意，需要在請求調用 open() 之前添加事件監聽，否則 progress 事件將不會被觸發。

②使用 XHR 監控上傳進度示例：

progress 事件同時存在於下載和上傳的傳輸。下載進度監控示例就如同上面的示例， 下面是上傳相關事件在 XMLHttpRequest.upload 對象上被觸發的示例：

    let xhr = new XMLHttpRequest();
    xhr.upload.addEventListener("progress", updateProgress);
    xhr.upload.addEventListener("load" , transferComplete);
    xhr.upload.addEventListener("error", transferFailed  );
    xhr.upload.addEventListener("abort", transferCanceled);
    xhr.open();
    // 上傳進度
    function updateProgress (event) {
      // 如果 `lengthComputable` 屬性的值是 false，那麼意味著總字節數是未知並且 total 的值為零。
      if (event.lengthComputable) {
        let progress = event.loaded / event.total * 100;
        console.log('上傳進度：' + progress + '%') // 一個百分比進度
      } else {
        // 總大小未知時不能計算進度信息
      }
    }
    function transferComplete(event) {
      console.log("上傳完成");
    }
    function transferFailed(event) {
      console.log("上傳失敗");
    }

    function transferCanceled(event) {
      console.log("取消上傳");
    }

三、axios 監控進度

axios 提供瞭方便的 api 去獲取請求的進度：

// `onUploadProgress` 允許為上傳處理進度事件
onUploadProgress: function (progressEvent) {
    let num = progressEvent.loaded / progressEvent.total * 100 // 計算進度
    const loadingText = '進度：' + num + '%'
},

// `onDownloadProgress` 允許為下載處理進度事件
onDownloadProgress: function (progressEvent) {
    // 對原生進度事件的處理
    let num = progressEvent.loaded / progressEvent.total * 100 // 計算進度
    const loadingText = '進度：' + num + '%'
},

下面是一個 axios 結合 element-ui 的 el-upload 組件的使用示例

    <el-upload
      ref="upload"
      id="upload-box"
      action="void"
      :http-request="customUpload"
      :before-upload="handleBefore"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :before-remove="beforeRemove"
      :on-success="handleSuccess"
      :with-credentials="true"
      accept="*"
      list-type="text"
      :show-file-list="false"
      :file-list="fileList">
    </el-upload>
      customUpload (file) {
        let FormDatas = new FormData()
        FormDatas.append('file', file.file)
        // 封裝過的 axios 
        axios({
          method: 'post',
          url: this.$api.uploadFile, // 接口地址
          data: FormDatas,
          // 請求配置按需配置即可
          headers: {
            'Accept': 'application/json',
            'Content-Type': 'multipart/form-data;boundary=' + new Date().getTime()
          },
          // 上傳進度
          onUploadProgress: (progressEvent) => {
            let num = progressEvent.loaded / progressEvent.total * 100 | 0 // 計算進度
            this.loadingText = '進度：' + num + '%'
            file.onProgress({percent: num}) // 進度條
          }
        }).then((res) => {
          res.code === 0 && file.onSuccess(res) // 上傳成功(打鉤的小圖標)
        }).finally(() => {
          this.loading = false
        })
      }

四、寫在後面

  • ①XHR 未設置默認的超時限制，這意味著理論上一個請求的進度可以無限長。但實踐中，應該設置合理的超時限制， 並對相應的錯誤做處理。
  • ②服務器必須在響應中提供 Content-Length（內容長度）首部，才能對傳輸數據估算從傳輸進度。
  • ③對於分塊數據，因為響應的總長度未知，所以無法進行數據傳輸進度的估算。

到此這篇關於JavaScript實現監控上傳和下載進度的文章就介紹到這瞭,更多相關JS監控上傳載進度內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：