---
name: "UploadTask.onProgressUpdate"
mode: "kit"
versionRequirements:
  - { name: "BaseKit", version: "2.0.1" }
platform:
  - "iOS"
  - "Android"
title: "UploadTask.onProgressUpdate - 监听上传进度变化事件"
---

## UploadTask.onProgressUpdate

> [VERSION] BaseKit >= 2.0.1

> [PLATFORM] iOS, Android

### 描述

监听上传进度变化事件

### 参数

`(listener: Function)`

| 参数 | 类型 | 必填 | 默认值 | 描述 |
| --- | --- | --- | --- | --- |
| `listener` | `(params: Object) => void` | 是 | - | 事件监听回调函数 |

##### UploadTask.onProgressUpdate.listener(params) 的属性

| 属性 | 类型 | 必填 | 默认值 | 最低版本 | 描述 |
| --- | --- | --- | --- | --- | --- |
| `progress` | `number` | 是 | - | `2.0.1` | 下载进度百分比 |
| `totalBytesSent` | `number` | 是 | - | `2.0.1` | 已经下载的数据长度，单位 Bytes |
| `totalBytesExpectedToSend` | `number` | 是 | - | `2.0.1` | 预期需要下载的数据总长度，单位 Bytes |
| `requestId` | `string` | 是 | - | `2.0.1` | 网络请求id |


### 示例代码

#### Demo

```tsx
import { downloadFile, uploadFile } from '@ray-js/ray'

// 监听上传进度：拿到 UploadTask 后注册 onProgressUpdate，上传过程中回调进度
downloadFile({
  url: "https://airtake-public-data-1254153901.cos.ap-shanghai.myqcloud.com/ttttestfile/test_image.jpg",
  success: ({ tempFilePath }) => {
    const task = uploadFile({
      url: "https://httpbin.org/post",
      filePath: tempFilePath,
      name: "file",
      success: () => console.log("上传完成"),
      fail: error => console.error(error),
    });
    task.onProgressUpdate(e => {
      console.log("上传进度：", e.progress, e.totalBytesSent, "/", e.totalBytesExpectedToSend);
    });
  },
  fail: error => console.error(error),
});
```