当前位置:首页 > uni-app

uniapp断点下载

2026-03-05 04:59:31uni-app

断点下载实现原理

断点下载的核心是通过HTTP请求头Range字段指定下载范围,服务器返回对应文件片段。客户端需记录已下载的字节位置,中断后从断点位置继续请求。

基本步骤

配置manifest.json
manifest.json中启用网络下载权限:

{
  "networkTimeout": {
    "downloadFile": 60000
  },
  "uni-app": {
    "downloadFile": true
  }
}

核心代码实现

  1. 初始化下载任务并记录进度:
    
    let downloadTask = uni.downloadFile({
    url: 'https://example.com/largefile.zip',
    header: { 'Range': 'bytes=' + alreadyDownloaded + '-' },
    success: (res) => {
     if (res.statusCode === 206) {
       // 处理分片数据
     }
    }
    });

// 监听进度 downloadTask.onProgressUpdate((res) => { console.log('下载进度:', res.progress); console.log('已下载:', res.totalBytesWritten); });


2. 存储断点信息  
使用`uni.setStorageSync`保存已下载字节数:  
```javascript
uni.setStorageSync('downloadedBytes', res.totalBytesWritten);
  1. 恢复下载时读取断点
    const alreadyDownloaded = uni.getStorageSync('downloadedBytes') || 0;

注意事项

  • 服务器需支持Range请求,否则返回状态码200而非206
  • 大文件下载建议分片处理(如每10MB一个分片),减少内存压力。
  • 安卓平台需检查文件存储权限,iOS需确保沙盒路径可写。

错误处理

  • 网络中断时自动重试:
    
    let retryCount = 0;
    const maxRetry = 3;

function downloadWithRetry() { downloadTask.abort(); if (retryCount < maxRetry) { retryCount++; setTimeout(downloadWithRetry, 2000); } }

uniapp断点下载


- 捕获异常并记录日志:  
```javascript
uni.downloadFile({
  fail: (err) => {
    console.error('下载失败:', err);
    uni.reportAnalytics('download_error', { url: err.url });
  }
});

完整示例

// 初始化下载
function startDownload() {
  const savedBytes = uni.getStorageSync('file_downloaded_bytes') || 0;
  const task = uni.downloadFile({
    url: 'https://example.com/file.mp4',
    header: { 'Range': `bytes=${savedBytes}-` },
    success: (res) => {
      if (res.statusCode === 206) {
        uni.saveFile({
          tempFilePath: res.tempFilePath,
          success: (saveRes) => {
            uni.removeStorageSync('file_downloaded_bytes');
          }
        });
      }
    }
  });

  task.onProgressUpdate((res) => {
    uni.setStorageSync('file_downloaded_bytes', res.totalBytesWritten);
  });
}

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

相关文章

uniapp组件

uniapp组件

uniapp组件基础概念 uniapp的组件系统基于Vue.js,支持跨平台开发(H5、小程序、App等)。组件分为内置基础组件(如<view>、<button>)和自定义组件…

uniapp面试问啥

uniapp面试问啥

技术基础类问题 UniApp框架特性 跨端实现原理及条件编译的使用场景 如何理解"一次开发,多端运行"的优缺点 rpx与vw/vh单位的适配差异 Vue相关 生命周期在UniA…

uniapp改变checkbox选中状态

uniapp改变checkbox选中状态

修改 checkbox 选中状态的方法 在 uniapp 中修改 checkbox 的选中状态可以通过以下几种方式实现: 绑定 v-model 控制状态 通过数据绑定方式控制 checkbox 的…

uniapp 如何封装request请求

uniapp 如何封装request请求

封装 request 请求的核心思路 在 UniApp 中封装请求通常基于 uni.request,通过统一处理 URL、参数、header 和拦截逻辑提升代码复用性。以下是一个完整封装方案: 创建…

uniapp gpio

uniapp gpio

在 uniapp 中直接操作 GPIO(通用输入输出)通常需要依赖原生平台的硬件接口,因为 uniapp 本身是基于前端技术的跨平台框架,不直接提供硬件访问能力。以下是实现 GPIO 控制的几种方法:…

混合uniapp

混合uniapp

混合 UniApp 开发模式 混合 UniApp 开发通常指将 UniApp 与其他原生技术(如原生 iOS/Android 或 Flutter)结合使用,以兼顾跨平台效率和原生性能。以下是常见的混合…