介绍:

项目开发中，在文件上传或者下载的过程中，经常因为文件过大导致访问接口的时间过长。所有需要添加一个反馈来显示当前文件上传/下载的进度。

以下内容以文件下载为例

Axios

查阅官网发现有以下两个配置项

 代码实现功能

// onDownloadProgress 接收一个函数
// progressEvent.loaded 已下载的文件大小
// progressEvent.total 全部文件大小
axios({
    url: '/download/excel-api/export',
    onDownloadProgress: function (progressEvent) {
        let process = (progressEvent.loaded / progressEvent.total * 100 | 0)
        let progressText = `下载进度：${process}%`
        console.log(progressText);
    }
})

Ajax

代码实现功能

// 这里需要注意xhr接收的是一个函数，所以需要返回一个函数 () => xhr
var addProgressForXhr = (fn) => {
    var xhr = $.ajaxSettings.xhr()
    if(typeof fn =="function"){
        xhr.onprogress = fn;
    }
    return () => xhr
}

$.ajax({
    url: '/download/excel-api/export',
    xhr: addProgressForXhr(function (e) {
        let process = (e.loaded / e.total * 100)
        let progressText = `下载进度：${process}%`
        console.log(progressText);
    })
})

 可能遇到的问题

progressEvent下total的值若一直都是0，查看下载接口中响应头的ContentLength字段是否有返回。该值需要后端人员在接口的响应头中添加