uniapp 网络请求百分比进度条

在 uniapp 中，可以使用 uni.request 方法来发送网络请求。想要实现网络请求百分比进度条，可以使用 XMLHttpRequest 对象的 onprogress 事件来获取请求进度，并将进度信息传递给进度条组件进行展示。

以下是一个简单的实现示例：

1. 在页面中引入进度条组件：

<cu-progress percent="{{percent}}" active></cu-progress>

2. 在页面的 script 中定义请求方法，并监听进度：

export default {
  data() {
    return {
      percent: 0,
    };
  },
  methods: {
    async requestWithProgress(url, data) {
      const xhr = new XMLHttpRequest();
      xhr.open('POST', url);
      xhr.upload.onprogress = (event) => {
        if (event.lengthComputable) {
          this.percent = Math.round(event.loaded / event.total * 100);
        }
      };
      xhr.send(data);
      const res = await new Promise((resolve) => {
        xhr.onload = () => {
          resolve(xhr.responseText);
        };
      });
      return res;
    },
  },
};

3. 调用请求方法：

this.requestWithProgress('https://example.com/api/upload', formData);

其中，formData 是一个 FormData 对象，用于上传文件等数据。在 onprogress 事件中，通过计算已上传数据量与总数据量的比例，得出当前请求进度的百分比，并将其赋值给页面的 percent 变量，进度条组件会自动更新展示。