Skip to main content
Version: v2

Download & Upload Progress

useHook provides downloading and uploading for displaying progress information directly in the view.

Download progress

For performance reasons, there is no progress information in downloading by default. You need to set enableDownload of the method instance to true, which will continuously update the downloading status during the download process.

<template>
<div>File size: {{ downloading.total }}B</div>
<div>Downloaded: {{ downloading.loaded }}B</div>
<div>Progress: {{ downloading.loaded / downloading.total * 100 }}%</div>
</template>

<script setup>
const downloadGetter = alovaInstance.Get('/todo/downloadfile', {
// Start download progress
enableDownload: true
});
const { downloading } = useRequest(downloadGetter);
</script>

Upload progress

Using the upload progress status is the same as using the download progress. First enable the upload progress information through enableUpload, and then receive it by receiving the uploading responsive state.

<template>
<div>File size: {{ uploading.total }}B</div>
<div>Uploaded: {{ uploading.loaded }}B</div>
<div>Progress: {{ uploading.loaded / uploading.total * 100 }}%</div>
</template>

<script setup>
const uploadPoster = alovaInstance.Post('/todo/uploadfile', formData, {
// Start upload progress
enableUpload: true
});
const { uploading } = useRequest(uploadPoster);
</script>