前端实现 文件上传/下载 进度显示

介绍

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

axios

快速通道：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

查找jQuery文档，发现jQuery的ajax没有相应的事件，但是有xhr属性，可以配置XMLHttpRequest中的progress事件

代码实现

// 这里需要注意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字段是否有返回。该值需要后端人员在接口的响应头中添加