slice方法通过File.slice(start,end)按字节范围生成轻量Blob引用实现分片，避免整文件加载内存；需控制分片大小、防越界、携带元数据，并并发上传各片段以降低内存压力。
网页大文件上传通过 slice 方法实现分片，核心是利用 File 对象继承自 Blob 的特性，调用 file.slice(start, end) 按字节范围截取文件片段，避免一次性加载整份大文件到内存。这不是简单“切开”，而是生成轻量级引用，真正传输时才按需读取内容。
怎么用 slice 切出有效分片
关键在于控制起始偏移和结束位置，确保不越界、不遗漏：
- 设定合理分片大小（如 2MB 或 5MB），兼顾网络稳定性与并发效率
- 用
Math.min(file.size, start + chunkSize)防止最后一片超出文件末尾 - 每片需携带唯一标识（如
fileId）、序号（chunkIndex）、总数（totalChunks）和服务端校验所需元数据
切片后如何组织上传逻辑
不能直接把所有分片塞进一个请求，而要逐个或并发发送独立请求：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 每个分片构造成独立
FormData，附带fileId、chunkIndex、chunk等字段 - 推荐限制并发数（如 3～5 个），避免浏览器连接池耗尽或服务端拒绝
- 使用
Promise.allSettled或队列控制方式处理失败重试，单片失败不影响其他
为什么 slice 能降低内存压力
file.slice() 返回的是新 Blob 对象，它不立即读取原始文件内容，只是记录字节范围的引用。只有在后续调用 FileReader.readAsArrayBuffer() 或塞入 FormData 发起上传时，浏览器才按需加载对应片段。这样就把“一次加载几 GB”变成“每次只加载几 MB”，避免页面卡死或崩溃。
实际代码片段示意
以下为前端切片主逻辑（无依赖、可直接运行）：
function sliceFile(file, chunkSize = 2 * 1024 * 1024) {
const chunks = [];
let offset = 0;
while (offset < file.size) {
const end = Math.min(offset + chunkSize, file.size);
chunks.push(file.slice(offset, end));
offset = end;
}
return chunks;
}
<p>// 使用示例
const fileInput = document.querySelector('input[type="file"]');
fileInput.onchange = () => {
const file = fileInput.files[0];
const chunks = sliceFile(file);
console.log(<code>共 ${chunks.length} 片，每片约 ${chunkSize / 1024 / 1024} MB</code>);
}; 
