在日常项目中 

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

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

 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)}%`;
    }

Logo

前往低代码交流专区

更多推荐