vue+axios+elementUI实现加载进度条

    // 添加上传进度监听器
    if (config.onProgress) {
      config.onUploadProgress = config.onProgress;
    }

<loadingProgress :visible="loadingVisible" :loadingPercentage="loadingPercentage" />
import loadingProgress from './loadingProgress';

//上传文件
function uploadFileSubmit() {
  proxy.$refs['addRef'].validate(valid => {
    if (valid) {
      const loading = proxy.$loading({
        target: '.el-dialog',
        text: '加载中...'
      });
      let formData = new FormData();
      formData.append('file', uploadFile.value.raw);
      uploadDeliveryChangeId(formData, curRow.value.deliveryChangeId, formAdd.value.title,onProgress).then(res => {
        loading.close();
        proxy.$modal.msgSuccess('文件上传成功');
        emits('update:visible', !visible);
        uploadFile.value = [];
        emits('updateData');
      });
    }
  });
}
const loadingPercentage = ref(0);
const loadingVisible = ref(false);
function onProgress(e) {
  const { loaded, total } = e;
  const uploadPrecent = ((loaded / total) * 100) | 0;
  loadingPercentage.value = uploadPrecent;
}

000a6ea0c1a04860813a027515fc1a60.gif

<template>
  <div class="loading-overlay" v-if="visible">
    <el-progress type="circle" :percentage="loadingPercentage" :stroke-width="20"></el-progress>
    <p class="tips_css">加载中，请稍后！</p>
  </div>
</template>

<script setup>
const props = defineProps({
  loadingPercentage: Number,
  visible: Boolean
});
const { visible, loadingPercentage } = toRefs(props);
</script>

<style lang="scss" scoped>
.loading-overlay {
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}
::v-deep .el-progress__text {
  font-size: 24px !important;
  color: rgb(30, 160, 225) !important;
}
::v-deep .el-progress-circle {
  width: 150px !important;
  height: 150px !important;
}
.tips_css {
  font-size: 24px;
  color: rgb(30, 160, 225);
}
</style>

参考文献：

https://blog.51cto.com/u_16175523/7085783
https://codeantenna.com/a/5MtJnvLJhX
https://blog.csdn.net/qq_16785561/article/details/134280353