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