微信小程序云开发-下载云储存文件进度实时更新

一、前言

上篇文章实现了如何下载云存储中的文件，但是下载的进度以及下载文件的大小没有实时给用户展示，也没有给用户取消下载的按钮。那么，接下来我们实现下载进度实时展示的功能以及取消下载。

注意：本文实现的仅是单个文件的下载，如果是多个文件同时下载，代码直接使用会有问题，需要进行改造。
如需帮助，可以评论区提出或私信我（前提是给我个关注+点赞+收藏）。

先上图，实现效果如下：

二、实现代码

wxml

<button type="primary" bind:tap="downloadFileTap" style="margin-top: 50rpx;">下载文件实时进度</button>

<view class="flex-jc-ac" style="margin-top: 20rpx;">
    <view>当前进度: {{downloadProgress}}%</view>
    <view style="margin-left: 30rpx;">下载数据量: {{downloaded}}Mb / {{fileSize}} Mb</view>
</view>

<button type="warn" bind:tap="abortTap" style="margin-top: 50rpx;">中断下载任务</button>
<view wx:if="{{isAbort}}" style="width: 100vw; color: red; text-align: center; margin-top: 10rpx;">下载已中断</view>

js

let downloadTask = null;
Page({
  /**
   * 页面的初始数据
   */
  data: {
    downloadProgress: 0, // 下载进度
    downloaded: 0, // 已下载的数据量
    fileSize: 0, // 文件的大小
    isAbort: false,
  },

  async downloadFileTap() {
    const fileID = "cloud://xxxxxx"; // 要下载的云文件ID
    downloadTask = wx.cloud.downloadFile({
      fileID,
      success(res) {
        console.log("下载成功，临时文件路径 :>> ", res.tempFilePath);
      },
      fail(err) {
        console.log("下载失败:>> ", err);
      },
      complete() {
        // 移除下载监听
        downloadTask.offProgressUpdate();
        console.log("移除监听 :>> ");
      },
    });
    this.setData({ isAbort: false });
    // 开启下载监听
    downloadTask.onProgressUpdate((res) => {
      const { progress, totalBytesWritten, totalBytesExpectedToWrite } = res;
      this.setData(
        downloadProgress: progress,
         // 这里做了单位转换，官方返回的是字节，这里转换成了Mb
        downloaded: (totalBytesWritten / 1024 / 1024).toFixed(2),
        fileSize: (totalBytesExpectedToWrite / 1024 / 1024).toFixed(2),
      });
    });
  },

  abortTap() {
    if (!downloadTask) return;
    // 中断下载
    downloadTask.abort();
    this.setData({ isAbort: true });
  },
});

三、结语

最后来一下常规结语：
实际开发中的其他逻辑就不写了。需要同学们自己去考虑异常情况处理等问题啦。

有任何疑问可以在评论区留下。我每天都会进行回复，私聊不回。（为了刷积分）

以上均是本人开发过程中的一些经验总结与领悟，如果有什么不正确的地方，希望大佬们评论区斧正。

💥最后！！！不管这篇文章对你有没有用，既然都看到最后了。
👍赞一个！！！
🤩当然，顺带收藏就最好了。
😎欢迎转载，原创不易，转载请注明出处✍️。

😊如果你对小程序开发有兴趣或者正在学习小程序开发，可以关注我。每一篇都是原创，每一篇都是干货噢~。

————————————————
版权声明：本文为CSDN博主「super–Yang」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_44702572/article/details/135217952