file input 元素本身不支持切片上传，仅提供 file 对象供 javascript 调用 slice() 手动分片，并配合 fetch/xhr 实现上传逻辑。
File input 元素本身不支持切片上传
HTML 原生 <input type="file"> 只负责触发文件选择、提供 File 对象（含 slice() 方法），它不参与网络传输逻辑，更不会自动分片或发请求。所谓“切片上传”，完全是 JavaScript 层基于 File 或 Blob 手动调用 slice() + fetch() / XMLHttpRequest 实现的。
常见误解是以为加个属性（比如 multiple 或自定义 data-chunk-size）就能开启切片——不行，这些属性对上传行为零影响。
-
<input type="file" id="uploader">仅用于获取用户选中的File列表 - 后续所有分片、校验、并发控制、断点续传都必须由 JS 主动处理
- HTML 源码里看不到“上传逻辑”，只看到一个触发器
如何从 input 获取可切片的 File 对象
用户选择后，input.files 返回 FileList，其中每个项是 File（继承自 Blob），具备 slice() 方法。注意：不是所有浏览器都支持 Blob.slice() 的第三个参数（contentType），但前两个（start, end）是稳定可用的。
示例关键代码片段：
const input = document.getElementById('uploader');
input.addEventListener('change', (e) => {
const file = e.target.files[0];
if (!file) return;
<p>const chunkSize = 1024 * 1024; // 1MB
for (let start = 0; start </p>
-
file.slice()返回新Blob，不修改原文件，内存安全 -
start和end是字节偏移量，必须是整数，不能为负或超file.size - IE10+ 支持
Blob.slice()，但 IE 用的是msSlice()—— 现代项目通常忽略 IE，否则需兼容写法
切片上传必须绕过 form.submit()，改用 fetch/XHR
一旦用了 <form></form> + submit，浏览器会走传统 multipart/form-data 全量提交，无法插入分片逻辑。所以实际工程中，<input type="file"> 几乎总是脱离 form 独立存在，或者 form 被 event.preventDefault() 阻止默认行为。
- 不能写
<form enctype="multipart/form-data"> <input type="file"><button type="submit"></button> </form>并指望它分片 - 必须用
fetch('/upload', { method: 'POST', body: chunk })或FormData.append('chunk', chunk)构造单次请求 - 服务端需配套接收单片、校验顺序、合并文件——这部分 HTML 完全不参与
- 若需上传进度，只能靠
XMLHttpRequest.upload.onprogress或fetch+ReadableStream（较新，兼容性有限）
容易被忽略的底层细节：Blob.slice() 的字节边界与编码
File.slice() 是按**原始字节**切分的，不感知文本编码或文件结构。这对二进制文件（如图片、视频）完全安全；但若误将 UTF-8 文本按字节切开，可能在 chunk 边界处截断多字节字符（如中文），导致服务端解码异常——不过这通常不是问题，因为上传场景下服务端一般不直接解析文本内容，而是存为二进制 blob。
- 真正要小心的是：某些 API 要求首片包含文件头（如 PNG 的 89 50 4E 47），切片时若没对齐，服务端校验会失败
- 部分云存储 SDK（如 AWS S3 Multipart Upload）要求每片大小 ≥ 5MB（除最后一片），硬切 1MB 会报错
EntityTooSmall -
file.slice()返回的Blob没有name或lastModified，如需透传，得手动塞进FormData字段
切片不是加个属性就完事，它把控制权从浏览器移交给了你——包括错误重试、并发数限制、MD5 分片哈希、服务端合并策略，这些全在 JS 和后端之间闭环，HTML 里只留一个安静的 <input type="file">。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
