当前位置:首页 > uni-app

uniapp 断点下载

2026-02-05 23:25:00uni-app

实现断点下载的基本原理

断点下载允许在下载中断后从中断点继续下载,避免重复下载已完成的文件部分。核心是通过记录已下载的字节数,并在请求时设置Range头部实现。

使用uni.downloadFile实现断点下载

uni-app的uni.downloadFileAPI本身不支持断点续传,但可以通过以下方式手动实现:

uniapp 断点下载

  1. 记录下载进度 每次下载时,通过onProgressUpdate回调记录已下载的字节数,并持久化存储到本地:

    uniapp 断点下载

    let downloadedBytes = 0;
    const downloadTask = uni.downloadFile({
      url: 'https://example.com/largefile.zip',
      success: (res) => {
        if (res.statusCode === 200) {
          uni.saveFile({
            tempFilePath: res.tempFilePath
          });
        }
      }
    });
    
    downloadTask.onProgressUpdate((res) => {
      downloadedBytes = res.totalBytesWritten;
      uni.setStorageSync('downloadProgress', downloadedBytes);
    });
  2. 中断后恢复下载 再次启动下载时,从本地存储读取已下载字节数,并设置Range头部:

    const savedBytes = uni.getStorageSync('downloadProgress') || 0;
    const downloadTask = uni.downloadFile({
      url: 'https://example.com/largefile.zip',
      header: {
        'Range': `bytes=${savedBytes}-`
      },
      success: (res) => {
        // 处理文件保存
      }
    });

完整代码示例

// 启动或恢复下载
function startOrResumeDownload() {
  const url = 'https://example.com/largefile.zip';
  const savedBytes = uni.getStorageSync('downloadProgress') || 0;

  const downloadTask = uni.downloadFile({
    url: url,
    header: {
      'Range': `bytes=${savedBytes}-`
    },
    success: (res) => {
      if (res.statusCode === 206 || res.statusCode === 200) {
        uni.saveFile({
          tempFilePath: res.tempFilePath,
          success: (savedRes) => {
            console.log('文件保存成功', savedRes.savedFilePath);
          }
        });
      }
    }
  });

  downloadTask.onProgressUpdate((res) => {
    uni.setStorageSync('downloadProgress', res.totalBytesWritten);
  });
}

// 暂停下载
function pauseDownload() {
  downloadTask.abort();
}

注意事项

  • 服务器必须支持Range请求,否则会返回整个文件
  • 文件保存路径需要处理,避免重复保存
  • 大文件下载建议分片管理,减少内存占用
  • 实际项目中需要添加更多错误处理和状态管理

服务端要求

服务端需要正确响应Range请求,返回状态码206 Partial Content,并包含以下头部:

Accept-Ranges: bytes
Content-Range: bytes 200-1000/1001

标签: 断点uniapp
分享给朋友:

相关文章

uniapp开发

uniapp开发

uniapp开发简介 uniapp是一款基于Vue.js的跨平台开发框架,支持一次开发,多端部署。开发者可以通过编写一套代码,发布到iOS、Android、Web以及各种小程序平台(如微信、支付宝、百…

uniapp实现懒加载

uniapp实现懒加载

uniapp实现懒加载的方法 在uniapp中实现懒加载可以通过多种方式,以下是几种常见的方法: 使用uni.lazyLoad组件 uniapp提供了内置的懒加载组件,适用于图片等资源的懒加载。在页…

uniapp实现标题栏渐变

uniapp实现标题栏渐变

实现标题栏渐变的方法 在UniApp中实现标题栏渐变效果,可以通过修改页面的导航栏样式或使用自定义导航栏来实现。以下是几种常见的方法: 方法一:使用原生导航栏渐变 通过修改pages.json中的…

重构uniapp

重构uniapp

重构 Uniapp 项目的关键方法 代码结构优化 将页面、组件、静态资源按功能模块划分,避免全部堆放在根目录。建议采用以下结构: src/ ├── components/ // 通用组件…

投票 uniapp

投票 uniapp

uniapp 投票功能实现 uniapp 是一个基于 Vue.js 的跨平台开发框架,可以用于开发微信小程序、H5、App 等多种应用。实现投票功能需要结合前端界面和后端数据处理。 前端界面设计 使…

uniapp广播

uniapp广播

全局事件通信 在UniApp中实现广播功能可通过全局事件机制完成,适用于跨页面或组件通信。使用uni.$emit、uni.$on、uni.$off等方法实现事件的触发、监听与移除。 发送广播(触发事…