JavaScript實現(xiàn)監(jiān)控上傳和下載進度

第JavaScript實現(xiàn)監(jiān)控上傳和下載進度目錄一、寫在前面二、xhr監(jiān)控進度三、axios監(jiān)控進度四、寫在后面

一、寫在前面

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

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

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

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

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

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

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

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

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

letxhr=newXMLHttpRequest();

//要監(jiān)控請求進度，可以在xhr對象上注冊進度相關(guān)的事件

//每個請求，開始都會觸發(fā)loadStart，結(jié)束都會觸發(fā)loadEnd事件，它們之間，

//還可能會觸發(fā)一個或多個其他事件，有些事件可能會多次觸發(fā)。

xhr.addEventListener("progress",updateProgress);

xhr.addEventListener("load",transferComplete);

xhr.addEventListener("error",transferFailed);

xhr.addEventListener("abort",transferCanceled);

xhr.open();

//服務端到客戶端的傳輸進程（下載）

functionupdateProgress(event){

//如果

`lengthComputable`

屬性的值是false，那么意味著總字節(jié)數(shù)是未知并且total的值為零。

if(event.lengthComputable){

letprogress=event.loaded/event.total*100;

console.log('加載進度：'+progress+'%')//一個百分比進度

}else{

//總大小未知時不能計算進度信息

functiontransferComplete(event){

console.log("傳輸完成");

functiontransferFailed(event){

console.log("傳輸失敗");

functiontransferCanceled(event){

console.log("該請求已經(jīng)被取消");

//...其他內(nèi)容

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

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

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

letxhr=newXMLHttpRequest();

xhr.upload.addEventListener("progress",updateProgress);

xhr.upload.addEventListener("load",transferComplete);

xhr.upload.addEventListener("error",transferFailed);

xhr.upload.addEventListener("abort",transferCanceled);

xhr.open();

//上傳進度

functionupdateProgress(event){

//如果

`lengthComputable`

屬性的值是false，那么意味著總字節(jié)數(shù)是未知并且total的值為零。

if(event.lengthComputable){

letprogress=event.loaded/event.total*100;

console.log('上傳進度：'+progress+'%')//一個百分比進度

}else{

//總大小未知時不能計算進度信息

functiontransferComplete(event){

console.log("上傳完成");

functiontransferFailed(event){

console.log("上傳失敗");

functiontransferCanceled(event){

console.log("取消上傳");

}

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

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

//`onUploadProgress`允許為上傳處理進度事件

onUploadProgress:function(progressEvent){

letnum=progressEvent.loaded/progressEvent.total*100//計算進度

constloadingText='進度：'+num+'%'

//`onDownloadProgress`允許為下載處理進度事件

onDownloadProgress:function(progressEvent){

//對原生進度事件的處理

letnum=progressEvent.loaded/progressEvent.total*100//計算進度

constloadingText='進度：'+num+'%'

},

下面是一個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){

letFormDatas=newFormData()

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='+newDate().getTime()

//上傳進度

onUploadProgress:(progressEvent)={

letnum=progressEvent.loaded/progressEvent.total*100|0//計算進度

this.loadingText='進度：'+num+'%'

file.onProgress({percent:num})//進度條

}).then((res)={

res.code===0file.onSuccess(res)//上傳成功(