下载和上传进度

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

下载进度

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

vue composition

<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>

react

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

const App = () => {
  const { downloading } = useRequest(downloadGetter);
  return (
    <>
      <div>文件大小：{downloading.total}B</div>
      <div>已下载：{downloading.loaded}B</div>
      <div>进度：{(downloading.loaded / downloading.total) * 100}%</div>
    </>
  );
};

svelte

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

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

vue options

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

<script>
  import { useRequest } from 'alova';
  import { mapAlovaHook } from '@alova/vue-options';

  const downloadGetter = alovaInstance.Get('/todo/downloadfile', {
    // 开启下载进度
    enableDownload: true
  });
  export default {
    mixins: mapAlovaHook(function () {
      return {
        file: useRequest(downloadGetter)
      };
    })
  };
</script>

上传进度

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

vue

<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>

react

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

const App = () => {
  const { uploading } = useRequest(uploadPoster);
  return (
    <>
      <div>文件大小：{uploading.total}B</div>
      <div>已上传：{uploading.loaded}B</div>
      <div>进度：{(uploading.loaded / uploading.total) * 100}%</div>
    </>
  );
};

svelte

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

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

vue options

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

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

  export default {
    mixins: mapAlovaHook(function () {
      return {
        file: useRequest(uploadPoster)
      };
    })
  };
</script>