移动端h5大文件分片上传需用file.slice()切片、formdata逐片上传并后端合并；关键在适配内存/弱网限制、实现断点续传与进度反馈，注意ios safari兼容性及android webview降级处理。

移动端 H5 实现大文件分片上传，核心是利用 File 对象的 slice() 方法切片 + FormData 逐片上传 + 后端配合接收与合并。关键在于适配移动端限制（如内存、弱网、浏览器兼容性），并保证断点续传和用户体验。

一、获取文件并合理分片

用户通过 <input type="file"> 选择文件后，用 file.slice(start, end) 切片。注意：

• 不要一次性读取整个文件到内存（避免 iOS Safari 崩溃），切片大小建议 1–5 MB（太小增加请求次数，太大易超时或卡顿）
• 使用 file.webkitRelativePath 或 file.name 保留原始文件名，便于后端识别同一文件
• 为每片生成唯一标识（如 fileId + index），用于断点续传校验

二、按顺序上传分片并记录进度

用 fetch 或 XMLHttpRequest 上传每片，推荐 fetch（更易控制 AbortController）。要点：

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

• 每片上传携带必要元数据：文件 ID、总片数、当前索引、分片哈希（可选，用于秒传/去重）
• 使用 FormData 封装分片二进制数据：formData.append('chunk', blob, 'chunk')
• 监听 upload.onprogress（XHR）或用 ReadableStream + TransformStream（高级场景）实现上传进度条
• 失败时记录已成功上传的片索引，支持断点续传（下次跳过已传片）

三、前端合并逻辑与后端协同

前端不负责真正“合并文件”，而是通知后端执行合并操作：

• 所有分片上传完成后，发一个合并请求（如 POST /merge），携带 fileId 和片信息
• 后端校验所有分片是否齐备、顺序是否正确、MD5/SHA1 是否匹配（防损坏）
• 后端用流式写入（如 Node.js 的 fs.createWriteStream + pipe）拼接临时文件，再重命名为目标文件
• 前端收到合并成功响应后，可跳转或提示完成

四、移动端特别注意事项

H5 在 iOS/Android 浏览器中行为差异大，需针对性处理：

• iOS Safari 不支持 File.prototype.slice 的第三个参数（contentType），且对大 Blob 内存敏感，建议切片后立即上传、及时释放引用（blob = null）
• Android WebView（尤其旧版）可能不支持 AbortController，降级用 XHR.abort()
• 弱网下开启请求重试（最多 2–3 次），配合指数退避；上传前检测网络状态（navigator.onLine + fetch 预检）
• 隐藏原生 file input，用按钮触发，并用 label 或 JS click() 兼容 iOS 点击失效问题

不复杂但容易忽略。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！