当前位置:首页 > 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 项目依赖 在项目根目录下执行以下命令,移除 node_modules 和依赖锁文件: rm -rf node_modules package-lock.json 如需清理全局…

uniapp使用npm

uniapp使用npm

uniapp中使用npm的方法 uniapp支持通过npm安装和管理第三方依赖包,以下是具体操作步骤: 安装Node.js环境 确保本地已安装Node.js(建议使用LTS版本),安装后会自动包含n…

uniapp部署到服务器

uniapp部署到服务器

部署准备 确保本地开发环境已完成项目构建,生成静态文件(H5端为/dist/build/h5目录)。检查服务器环境是否安装Nginx/Apache等Web服务软件,并配置好域名解析。 上传文件 通过…

uniapp swiper禁止滑动

uniapp swiper禁止滑动

禁用 Swiper 滑动的方法 在 UniApp 中,可以通过设置 disableTouch 属性或动态绑定 touchable 属性来禁止 Swiper 组件的滑动行为。 方法一:通过 disab…

uniapp指南

uniapp指南

开发环境搭建 下载HBuilderX作为官方推荐的开发工具,支持Windows和Mac系统。安装后创建uni-app项目,选择模板(如默认模板、Hello Uni-app等)。确保Node.js版本在…