跳到主要内容
版本:v2

下载和上传进度

useHook 提供了downloadinguploading用于直接在视图中展示进度信息。

下载进度

为了性能考虑,默认情况下downloading中没有进度信息,需要将 method 实例的enableDownload设置为true,就会在下载过程中持续更新downloading状态。

<template>
<div>文件大小:{{ downloading.total }}B</div>
<div>已下载:{{ downloading.loaded }}B</div>
<div>进度:{{ downloading.loaded / downloading.total * 100 }}%</div>
</template>

<script setup>
const downloadGetter = alovaInstance.Get('/todo/downloadfile', {
// 开启下载进度
enableDownload: true
});
const { downloading } = useRequest(downloadGetter);
</script>

上传进度

使用上传进度状态与下载进度使用方法相同,先通过enableUpload开启上传进度信息,再通过接收uploading响应式状态接收。

<template>
<div>文件大小:{{ uploading.total }}B</div>
<div>已上传:{{ uploading.loaded }}B</div>
<div>进度:{{ uploading.loaded / uploading.total * 100 }}%</div>
</template>

<script setup>
const uploadPoster = alovaInstance.Post('/todo/uploadfile', formData, {
// 开启上传进度
enableUpload: true
});
const { uploading } = useRequest(uploadPoster);
</script>