uni-app怎么实现断点续传功能

风磊君_6357

风磊君_6357

2026-11-14

406人浏览

原创

uni.uploadFile 不支持断点续传是硬限制,因其黑盒封装、无进度回调、无法获取已上传字节、不支持分片与Range头,须改用分片上传+服务端协同方案。

uni-app怎么实现断点续传功能

uni.uploadFile

不支持断点续传,这是硬限制。所有平台(H5、小程序、App)下它都是黑盒封装,不暴露上传进度、暂停/恢复能力,也无法控制分片或读取已上传字节偏移量。想靠它实现断点续传,注定失败。

为什么 uni.uploadFile 不能做断点续传

根本原因在于它不提供底层控制权:

  • 没有 onUploadProgress 的可靠回调(App 端基本不可用,小程序返回值不稳定)
  • 无法获取当前已上传字节数,中断后无从知道“传到哪了”
  • 不支持设置 Range 请求头(下载场景)或分片标识(上传场景)
  • 错误码模糊:fail abort 可能是用户取消、切后台、系统 kill,JS 层无法区分

上传断点:必须用分片 + 服务端协同(H5 / 小程序 / App 各有路径)

核心不是“怎么发”,而是“怎么管状态”——客户端要能查、能跳、能存、能续。

  • H5 环境优先用 File.slice() 分片,配合 fetch 或 XMLHttpRequest 手动发请求,每片带 chunkIndex 和 chunkMd5
  • 小程序端不能直接读文件局部字节,得先用 uni.getFileSystemManager().readFile 配合 position 和 length 分段读,否则大文件易内存溢出
  • App 端别碰 uni.uploadFile,改用 plus.uploader.createUpload,它支持手动分片、自定义 header(如 X-Part-Number)、监听单片状态
  • 所有平台都必须在上传前调用 /api/upload/init 接口,传 fileMd5 + fileName,拿到 uploadId 和已传分片列表(如 [0,2,4])
  • 上传中状态必须存进 uni.setStorageSync,但注意:要 JSON.stringify 再存,否则读出来是 [object Object]

下载断点:靠 Range + 本地文件追加写入

下载断点续传依赖 HTTP Range 头和服务端 206 响应,客户端负责检查本地文件长度并追加写入。

uni-app
uni-app

uni-app 是基于 Vue 的跨端开发框架,适合开发 H5、App、小程序、鸿蒙和多端业务应用。

下载
  • 先用 uni.getFileSystemManager().getFileInfo 查目标文件是否存在及大小,得到 size
  • 发起 uni.request 时,在 header 中加 {"Range": "bytes=" + size + "-"}
  • 服务端必须支持 Range,返回状态码为 206 Partial Content;若返回 200,说明不支持,需清空重下
  • 收到响应后,用 uni.getFileSystemManager().writeFile 的 append: true 模式写入(H5 不支持该参数,需自行用 Blob 合并)
  • 别用 uni.downloadFile 实现断点——它不支持 Range,也不允许追加写入,只能重头来

容易被忽略的三个关键点

很多实现卡在最后一步,不是逻辑错,而是细节失控:

  • 服务端没做原子性校验:分片写入临时目录后,必须同步更新数据库/Redis 记录,否则并发上传可能覆盖或丢失状态
  • 客户端没做“状态再拉取”:恢复上传前,必须重新请求 /api/upload/status?uploadId=xxx,不能只信本地缓存——服务端可能清理了超时分片
  • App 切后台后 JS 上下文可能被回收,plus.uploader 实例失效,所有进度必须落地到本地存储,且建议加时间戳防旧状态覆盖新任务

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.11

3003

5

前端如何实现即时通讯
前端如何实现即时通讯

实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍:1、WebSocket,它可以在客户端和服务器之间建立持久连接,实现实时的双向通信,前端可以使用 WebSocket API来创建WebSocket连接,并通过发送和接收消息来实现即时通讯;2、Long Polling,是一种模拟实时通信的技术等等。

2023.10.09

6583

6

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

2024.03.19

7430

13

php和前端的关联介绍
php和前端的关联介绍

php既可以作为前端语言,也可以作为后端语言。想了解更多php和前端的相关内容,可以阅读本专题下面的文章。

2024.03.22

7338

10

前端外包工作内容有哪些
前端外包工作内容有哪些

前端外包工作内容包括:1. 网站和应用程序开发;2. 用户界面和交互设计;3. 用户体验优化;4. 设计和视觉开发;5. 跨浏览器兼容性;6. 性能优化;7. 维护和更新;8. 项目管理和沟通。想了解更多前端的相关内容,可以阅读本专题下面的文章。

2024.05.22

1043

5

http500解决方法
http500解决方法

http500解决方法有检查服务器日志、检查代码错误、检查服务器配置、检查文件和目录权限、检查资源不足、更新软件版本、重启服务器或寻求专业帮助等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2023.11.09

4083

4

http请求415错误怎么解决
http请求415错误怎么解决

解决方法:1、检查请求头中的Content-Type;2、检查请求体中的数据格式;3、使用适当的编码格式;4、使用适当的请求方法;5、检查服务器端的支持情况。更多http请求415错误怎么解决的相关内容,可以阅读下面的文章。

2023.11.14

994

3

HTTP 503错误解决方法
HTTP 503错误解决方法

HTTP 503错误表示服务器暂时无法处理请求。想了解更多http错误代码的相关内容,可以阅读本专题下面的文章。

2024.03.12

6886

8

http与https有哪些区别
http与https有哪些区别

http与https的区别:1、协议安全性;2、连接方式;3、证书管理;4、连接状态;5、端口号;6、资源消耗;7、兼容性。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2024.08.16

5610

6

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
uni-app从入门到实战教程
uni-app从入门到实战教程

共0课时 | 0人学习

uni-app x harmony开发指南
uni-app x harmony开发指南

共0课时 | 0人学习

uni-app鸿蒙运行和发行
uni-app鸿蒙运行和发行

共0课时 | 0人学习