axios进度条控制

170 阅读1分钟

1.请求资源进度条

效果如下

image.png

<template>
    <el-progress type="circle" :percentage="percentage" />
</template>
<script setup>
    import axios from "axios";
    import { ref } from "vue";
    let percentage = ref(0);
    axios({
        method: "get",
        responseType: "blob", // 流文件为blob类型
        url: "文件地址",
        onDownloadProgress(ProgressEvent) {
        percentage.value = Math.round(ProgressEvent.progress * 100);
        console.log("进度", percentage.value);
      },
    }).then(({ data }) => {
      console.log("接口请求完成", data);
    });
</script>

2.文件上传进度条

=====有灵感再写=====