vue项目获取上传、下载进度

在日常项目中 

大文件下载或者上传，花费的时间比较长，没有任何提示，用户体验很差。

需要优化，提示文件在下载中，并且显示进度百分比。

 1.onUploadProgress 文件上传进度监听

一般 onUploadProgress 是用于监听文件上传的进度 ，且onUploadProgress 是axois中的事件 所以我们可以在封装好的axois请求中去使用它 如下代码

//封装好的 axois
import request from '@/utils/request';

export function upload(...,onUploadProgress){
    return request({
    ...,
    //此处使用 上传监听
    onUploadProgress
    })
}

//使用

upload(...,uploadProgress );

 const uploadProgress = (ps) => {
      progressTitle.value = `进度：${Math.floor(
        (ps.loaded / ps.total) * 100,
      )}%`;
  };

 2.onDownloadProgress 文件下载进度监听

用法与文件上传进度监听差不多，但此方法是用于监听下载的进度，使用于流（Blob）下载

//封装好的 axois
import request from '@/utils/request';

export function download(...,onUploadProgress){
    return request({
    ...,
    //此处使用 上传监听
    onUploadProgress
    })
}

//使用

download(...,onDownloadProgress );

 const onDownloadProgress = (ps) => {
      progressTitle.value = `进度：${Math.floor(
        (ps.loaded / ps.total) * 100,
      )}%`;
  };

首先我们可以从axois中得知 文件上传及 下载进度 是由axois中的onUploadProgress（获取文件上传进度事件）以及 onDownloadProgress（文件下载进度事件）中获取的。而在vue项目中我们一般会将axois进行二次封装

 以上传为例子：一般封装好 调用的代码如下

进度获取如下：

 

 获取进度的主要代码

(ps) => {
      progressTitle.value = `进度：${Math.floor((ps.loaded / ps.total) * 100)}%`;
    }