XHR 文件上傳進度條原理解析

時間 2019-11-16

標籤 xhr 文件上傳進度原理解析简体版

原文原文鏈接

前言

前幾天再寫本身的一個後臺模板。有個功能是實現上傳進度條。vue

那麼ojk了，上網上找下上傳進度條的實現。ios

(這個截圖是我已經寫的好的)

此刻我忽然想到了爲啥我不看看ng-zorro 得代碼怎麼寫的，他確定寫的有上傳進度條得功能……git

在 github.com/NG-ZORRO/ng… 第248行處發現了這個……github

return this.http.request(req).subscribe((event: HttpEvent<{}>) => {
      if (event.type === HttpEventType.UploadProgress) {
        if (event.total > 0) {
          // tslint:disable-next-line:no-any
          (event as any).percent = event.loaded / event.total * 100;
        }
        args.onProgress(event, args.file);
      } else if (event instanceof HttpResponse) {
        args.onSuccess(event.body, args.file, event);
      }
    }, (err) => {
      this.abort(args.file);
      args.onError(err, args.file);
    });
複製代碼

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

好吧，angular已經完成了一大部分得東西。

問題來了

angular得已經幫咱們實現了，那麼jQuery得網上也能找到，那麼原生的js上傳進度條又該怎麼實現？axios

在社區找到一份代碼。 segmentfault.com/a/119000001…segmentfault

var xhr = new XMLHttpRequest();  // 先new 一個XMLHttpRequest。
    xhr.open('POST', 'url');   // 設置xhr得請求方式和url。
   
    xhr.onreadystatechange = function() {   // 等待ajax請求完成。
        if (xhr.status === 200) {&emsp;&emsp;
            console.log(xhr.responseText);
        } else {
            console.log('上傳出錯');
        }
    };
    // 獲取上傳進度
    xhr.upload.onprogress = function(event) { 
        console.log(event.loaded)
        console.log(event.total)
        if (event.lengthComputable) {
            var percent = Math.floor(event.loaded / event.total * 100);
            document.querySelector("#progress .progress-item").style.width = percent + "%";
            // 設置進度顯示
            console.log(percent)
        }
    };
    xhr.send(fd);
複製代碼

XHR 接口規範: xhr.spec.whatwg.org/bash

重要的東西來了。就是 upload.onprogress 點上去會發現antd

好了你就是咱們大Boss了，能夠看到這裏有辣麼多方法……咱們只須要用 onprogress。ui

onprogress 是ProgressEvent類型.

ProgressEvent 有三個對象

lengthComputable 只讀屬性是一個布爾Boolean 標誌，表示ProgressEvent 所關聯的資源是否具備能夠計算的長度 (MDN)
loaded表示已經接收的字節數
total 表示文件的字節

因此

文件上傳的進度： onprogress監聽到 ProgressEvent的到已經上傳完得字節 / 上傳文件得字節 * 100

vue 怎麼辦呢？

jQuery的話百度一搜一大把，

走原生：

element 上傳走的就是原生的js

github.com/ElemeFE/ele… （第39開始）

if (xhr.upload) {
    xhr.upload.onprogress = function progress(e) {
      if (e.total > 0) {
        e.percent = e.loaded / e.total * 100;
      }
      option.onProgress(e);
    };
  }

複製代碼

走axios：

axios也是已經實現了。

github.com/axios/axios…

if (typeof config.onUploadProgress === 'function' && request.upload) {
      request.upload.addEventListener('progress', config.onUploadProgress);
    }
複製代碼