JavaScript如何實(shí)現(xiàn)監(jiān)控上傳和下載進(jìn)度

本篇內(nèi)容主要講解“JavaScript如何實(shí)現(xiàn)監(jiān)控上傳和下載進(jìn)度”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“JavaScript如何實(shí)現(xiàn)監(jiān)控上傳和下載進(jìn)度”吧!

一、寫(xiě)在前面

網(wǎng)路的不穩(wěn)定性，網(wǎng)速的變化，會(huì)導(dǎo)致有時(shí)一個(gè)請(qǐng)求可能需要很長(zhǎng)的的時(shí)間，而這個(gè)過(guò)程如果沒(méi)有相應(yīng)的提示，讓用戶(hù)感知進(jìn)度，這可能是一種糟糕的體驗(yàn)。這在體現(xiàn)請(qǐng)求進(jìn)度，加載進(jìn)度的需求，在文件上傳下載業(yè)務(wù)中，更為強(qiáng)烈。

下面從 XHR 請(qǐng)求和 axios 兩個(gè)角度，分析如何實(shí)現(xiàn)監(jiān)控請(qǐng)求進(jìn)度，獲取文件上傳下載進(jìn)度。

tips：上傳下載進(jìn)度監(jiān)控，不應(yīng)僅僅是數(shù)據(jù)傳輸進(jìn)度比的獲取，還應(yīng)包括傳輸過(guò)程可能出現(xiàn)的狀態(tài)。

二、xhr 監(jiān)控進(jìn)度

XHR 的出現(xiàn)，在 web應(yīng)用發(fā)展歷史上是具有里程碑意義的，它使得 DHTML 的 D 更加真實(shí)。此外，ajax 和 axios 本質(zhì)上也是一種對(duì) XHR 的封裝實(shí)現(xiàn)。在 js 中我們無(wú)須依賴(lài)第三方插件，就可以實(shí)現(xiàn)異步請(qǐng)求，因?yàn)橛?XHR（new XMLHttpRequest()），這有時(shí)很有用。所以，幾遍在項(xiàng)目中可能很少再使用 XHR，而是使用它的某種實(shí)現(xiàn)，例如 axios 或 ajax，了解 XHR 也是有意義的。

XHR 在監(jiān)控請(qǐng)求進(jìn)度上，其實(shí)提供了方便的API，下面是和 XHR 進(jìn)度相關(guān)的事件：

上面的事件就可以方便用于監(jiān)控請(qǐng)求進(jìn)度，請(qǐng)求狀態(tài)，progress 可能更為常用，這常常結(jié)合進(jìn)度回調(diào)的 event.loaded 和 event.total， 來(lái)獲取進(jìn)度的百分比。

①使用 XHR 監(jiān)控下載進(jìn)度示例：

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

tips：注意，需要在請(qǐng)求調(diào)用 open() 之前添加事件監(jiān)聽(tīng)，否則 progress 事件將不會(huì)被觸發(fā)。

②使用 XHR 監(jiān)控上傳進(jìn)度示例：

progress 事件同時(shí)存在于下載和上傳的傳輸。下載進(jìn)度監(jiān)控示例就如同上面的示例， 下面是上傳相關(guān)事件在 XMLHttpRequest.upload 對(duì)象上被觸發(fā)的示例：

    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();
    // 上傳進(jìn)度
    function updateProgress (event) {
      // 如果 `lengthComputable` 屬性的值是 false，那么意味著總字節(jié)數(shù)是未知并且 total 的值為零。
      if (event.lengthComputable) {
        let progress = event.loaded / event.total * 100;
        console.log('上傳進(jìn)度：' + progress + '%') // 一個(gè)百分比進(jìn)度
      } else {
        // 總大小未知時(shí)不能計(jì)算進(jìn)度信息
      }
    }
    function transferComplete(event) {
      console.log("上傳完成");
    }
    function transferFailed(event) {
      console.log("上傳失敗");
    }

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

三、axios 監(jiān)控進(jìn)度

axios 提供了方便的 api 去獲取請(qǐng)求的進(jìn)度：

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

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

下面是一個(gè) axios 結(jié)合 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)
        // 封裝過(guò)的 axios 
        axios({
          method: 'post',
          url: this.$api.uploadFile, // 接口地址
          data: FormDatas,
          // 請(qǐng)求配置按需配置即可
          headers: {
            'Accept': 'application/json',
            'Content-Type': 'multipart/form-data;boundary=' + new Date().getTime()
          },
          // 上傳進(jìn)度
          onUploadProgress: (progressEvent) => {
            let num = progressEvent.loaded / progressEvent.total * 100 | 0 // 計(jì)算進(jìn)度
            this.loadingText = '進(jìn)度：' + num + '%'
            file.onProgress({percent: num}) // 進(jìn)度條
          }
        }).then((res) => {
          res.code === 0 && file.onSuccess(res) // 上傳成功(打鉤的小圖標(biāo))
        }).finally(() => {
          this.loading = false
        })
      }

到此，相信大家對(duì)“JavaScript如何實(shí)現(xiàn)監(jiān)控上傳和下載進(jìn)度”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢(xún)，關(guān)注我們，繼續(xù)學(xué)習(xí)！