讲师中心 微信公众号

工具推荐

视频效率加速
AniShort
AniShort

AI短剧协同制作平台

剧云
剧云

中文短剧剧本制作平台

立刻MV
立刻MV

低成本歌曲 MV、视频生成

Laper
Laper

剧本策划到成片协作

uni-app如何解决H5端在大文件上传时的切片与续传

轻磊吖_8143

轻磊吖_8143

发布时间:2026-08-05 13:54:23

|

480人浏览过

|

来源于php中文网

原创

uni-app H5端必须用File.slice()切片,因uni.uploadFile不暴露XMLHttpRequest无法监听进度;需用原生fetch/XHR分片上传,配合MD5生成fileId存localStorage实现断点续传。

uni-app如何解决h5端在大文件上传时的切片与续传

uni-app H5端必须用 File.slice() 切片,别碰 uni.uploadFile

直接结论:uni.uploadFile 在 H5 环境下仍是黑盒,不暴露底层 XMLHttpRequest 实例,无法监听上传进度、暂停或恢复。想做断点续传,必须绕过它,自己用原生 fetch 或 XMLHttpRequest 发起分片请求。

切片唯一可靠方式是调用浏览器原生 File.slice()(H5 下 tempFile 就是 File 对象):

  • File.slice(start, end) 返回 Blob,可直接塞进 FormData 或作为 fetch body
  • 不要用 uni.getFileSystemManager().readFile —— 这是小程序/APP 专用 API,H5 不支持,调用会静默失败
  • 切片大小建议设为 2 * 1024 * 1024(2MB),WiFi 环境可上到 5 * 1024 * 1024,避免单次请求超时

断点状态必须存在 localStorage + 唯一 key,不能只靠文件名

用户刷新页面、关掉标签页后还能续传,靠的是本地记录“这个文件传到第几片了”。但光存 fileName 不行——同名文件可能来自不同用户、不同设备、不同时间。

正确做法是上传前先算整个文件的 MD5(用 spark-md5 或 crypto-js),生成唯一 fileId,再以它为 key 存状态:

  • 存的内容至少包括:{ fileId: 'xxx', uploadedChunks: [0,2,4], totalChunks: 12, uploadTime: Date.now() }
  • 每次上传前先查 localStorage,跳过已成功上传的分片索引
  • 上传失败后更新 uploadedChunks 数组,不是覆盖整条记录(防止并发写入丢失)
  • 注意:MD5 计算要全量读取文件,大文件会卡 UI,务必用 Web Worker 或分块计算(SparkMD5.ArrayBuffer)

服务端必须提供分片校验接口,否则客户端“续”不起来

客户端能“续”,前提是服务端知道“哪几片我收过了”。不能靠文件名或路径判断,得靠上传前协商好的唯一标识。

标准握手流程如下:

uni-app
uni-app

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

下载
  • 前端先发 POST /api/upload/init,带 { fileMd5: 'xxx', fileName: 'a.mp4', fileSize: 123456789 }
  • 服务端查数据库或缓存,返回已上传的分片序号列表,比如 { uploadedChunks: [0,1,3] }
  • 前端据此跳过这些序号,只上传剩余分片,并在每个分片请求头里带上 X-Chunk-Index: 2、X-File-Id: xxx
  • 服务端收到分片后,按 fileId + chunkIndex 存临时文件,最后合并前再校验总 MD5

如果服务端没这个 /init 接口,或者只返回 success: true,那客户端所谓“续传”只是假象——重传所有分片,和没断点一样。

H5 分片上传的兼容性坑:Safari 的 File.slice() 参数是 start, length

Chrome/Firefox 的 File.slice(start, end) 是闭区间左开右闭;Safari(尤其旧版)的 slice(start, length) 是起始+长度。直接写 file.slice(i * size, (i+1) * size) 在 Safari 下会传错数据甚至报错。

稳妥写法是统一用三参数形式,并做 UA 判断或 feature detect:

const blob = typeof file.slice === 'function' 
  ? file.slice(start, end, type) // 大多数浏览器
  : file.webkitSlice?.(start, end, type) || file.mozSlice?.(start, end, type);

更推荐的做法是封装一层 getChunk(file, index, chunkSize),内部处理兼容逻辑,外部只管传索引。

真正麻烦的不是切片本身,而是把“已传哪些片”“当前网络是否稳定”“服务端是否认得这个 fileId”三者对齐。少一个环节,断点就形同虚设。

热门AI工具

更多
PixTV
PixTV Hot

PixTV是一款面向AIGC内容创作的AI视频生成工具。

码上飞
码上飞 Hot

一款基于自然语言的AI应用开发平台,可根据用户描述自动生成应用程序,帮助个人和团队快速完成应用原型与开发。

Laper
Laper Hot

Laper是专为编剧、导演和制片人推出的 AI 原生剧本创作工具。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

Atoms
Atoms Hot

Atoms是一款AI智能体工具,第一支自动构建真实业务的 AI 团队。

UP简历
UP简历 Hot

一款AI办公效率工具,主要用于基于AI技术的免费在线简历制作工具,适合需要提升相关任务效率的用户。

咔片AIPPT

一款在线AI演示文稿制作工具,可根据主题和内容需求辅助生成PPT结构与页面,提高演示材料制作效率。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

相关专题

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

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

2983

2023.08.11

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

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

6543

2023.10.09

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

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

7390

2024.03.19

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

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

7298

2024.03.22

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

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

1043

2024.05.22

html5动画制作有哪些制作方法
html5动画制作有哪些制作方法

html5动画制作方法有使用CSS3动画、使用JavaScript动画库、使用HTML5 Canvas等。想了解更多html5动画制作方法相关内容,可以阅读本专题下面的文章。

4851

2023.10.23

HTML与HTML5的区别
HTML与HTML5的区别

HTML与HTML5的区别:1、html5支持矢量图形,html本身不支持;2、html5中可临时存储数据,html不行;3、html5新增了许多控件;4、html本身不支持音频和视频,html5支持;5、html无法处理不准确的语法,html5能够处理等等。想了解更多HTML与HTML5的相关内容,可以阅读本专题下面的文章。

8688

2024.03.06

html5从入门到精通汇总
html5从入门到精通汇总

想系统掌握HTML5开发?本合集精选全网优质学习资源,涵盖免费教程、实战项目、视频课程与权威电子书,从基础语法到高级特性(Canvas、本地存储、响应式布局等)一应俱全,适合零基础小白到进阶开发者,助你高效入门并精通HTML5前端开发。

894

2025.12.30

Go-Zero API开发使用教程
Go-Zero API开发使用教程

本专题聚焦Go-Zero的API开发,拆解.api描述文件的语法结构、路由与分组定义、参数绑定与校验规则,说明统一响应体、JWT鉴权、跨域与接口文档生成的落地方式,并给出网关聚合与接口测试的实践建议。

20

2026.11.12

热门下载

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

精品课程

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

共0课时 | 0人学习

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

共0课时 | 0人学习

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

共0课时 | 0人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn