监控上传和下载进度

xhr监控进度

• loadstart 接收到响应数据时触发
• progress 当请求接收到更多数据时，周期性地触发
• error 当request遭遇错误时触发
• abort 当request被停止时触发，例如当程序调用XMLHttpRequest.abort()时
• load XMLHttpRequest请求成功完成时触发
• loadend 当请求结束时触发，无论请求成功还是失败

上面的事件就可以方便用于监控请求进度，请求状态，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事件将不会被触发

progress事件同时存在于下载和上传的传输，上传如下

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('取消上传');
}

axios监控进度

axios提供了方便的api去获取请求的进度

onUploadProgress: function(progressEvent) {
    let num = progressEvent.loaded / progressEvent.total * 100 // 计算进度
    const loadingText = `进度${num}%`
}
onDownloadProgress: function(progressEvent) {
    let num = progressEvent.loaded / progressEvent.total * 100 // 计算进度
    const loadingText = `进度${num}%`
}

axios + element-ui的el-upload示例

<template>
	<el-upload ref="upload"
	            id="upload-box"
	            action="void"
	            :http-request="customUpload"
	            :before-upload="handleBefore"
	            :on-preview="handleProview"
	            :on-remove="handleRemove"
	            :before-remove="beforeRemove"
	            :on-success="handleSuccess"
	            :width-credentials="true"
	            accept="*"
	            list-type="text"
	            :show-file-list="false"
	            :file-list="fileList"
	></el-upload>
</template>
<script>
    export default {
        method: {
        customUpload(file) {
            let FormDatas = new FormData()
            FormDatas.append('file', file.file)
            axios({
                method: 'post',
                url: uploadFileUrl,
                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
            })
        }
        }

    }
</script>