uniapp如何监听downloadprogress下载文件进度

在uniapp中如何监听downloadprogress事件来获取文件下载进度？我在使用uni.downloadFile下载文件时，需要实时显示下载进度条，但不知道具体该怎么实现。官方文档提到有progress回调，但不太清楚具体用法和参数含义。请问应该如何正确监听下载进度并更新UI？

2 回复

在uni-app中，使用uni.downloadFile下载文件，通过onProgressUpdate回调监听进度。示例：

uni.downloadFile({
  url: '文件地址',
  success: (res) => {},
  fail: (err) => {},
  complete: () => {},
  onProgressUpdate: (res) => {
    console.log('下载进度', res.progress) // 进度百分比
  }
})

在 UniApp 中，可以通过 uni.downloadFile API 的 onProgressUpdate 方法监听文件下载进度。具体步骤如下：

  1. 使用 uni.downloadFile 发起下载请求。
  2. 在返回的 downloadTask 对象上调用 onProgressUpdate 监听进度变化。
  3. 进度回调函数会返回 progress 和 totalBytesWritten、totalBytesExpectedToWrite 参数。

示例代码：

const downloadTask = uni.downloadFile({
  url: 'https://example.com/file.zip', // 替换为实际文件URL
  success: (res) => {
    if (res.statusCode === 200) {
      console.log('下载成功，临时路径:', res.tempFilePath)
    }
  },
  fail: (err) => {
    console.error('下载失败:', err)
  }
})

// 监听下载进度
downloadTask.onProgressUpdate((res) => {
  console.log('下载进度:', res.progress)        // 进度百分比
  console.log('已下载:', res.totalBytesWritten)    // 已下载字节数
  console.log('总大小:', res.totalBytesExpectedToWrite) // 总字节数
  
  // 可在进度回调中更新UI显示
  this.progressPercent = res.progress
})

注意事项：

  • 进度回调频率由系统决定，通常每秒1-3次
  • 需在页面卸载时调用 downloadTask.abort() 取消监听（如需要）
  • progress 范围 0-100，部分环境可能返回小数

适用于需要实时显示下载进度的场景，如下载管理器或大文件下载。

回到顶部