Layui.upload不支持原生chunkSize参数,分片必须手动实现:在choose回调中用file.slice()切片,配合ajax/fetch发送,自行管理chunkSize、start、currentChunk等参数,并确保服务端支持分片接收与合并。
layui.upload 没有 chunkSize 配置项,别往 options 里硬塞
直接写 chunksize: 5*1024*1024 到 upload.render 的配置对象里,完全无效。layui 官方 api 文档里查不到这个参数,所有声称“设置 chunksize 就能分片”的教程都是误传或自行封装的扩展逻辑。
真正起作用的是你在 choose 回调里写的 JavaScript:拿到 File 对象后,用原生 file.slice() 手动切片,再用 fetch 或 $.ajax 发送。Layui 只负责触发选择、提供上传入口,分片控制权在你手上。
-
upload.start()和upload.upload()是为单次完整上传设计的,调它们不会帮你分片 - 浏览器兼容性要自己兜底:
File.prototype.slice在 IE10+ 才支持,旧环境需降级或提示 - 别依赖
file.lastModified算唯一 ID——它精度只有秒级,同一秒选两个同名文件会冲突
choose 回调里怎么切片?三个变量决定一切
切片不是靠开关,而是靠你算出来的三个值:chunkSize、start、currentChunk。它们共同决定每次发哪一段二进制数据。
-
chunkSize建议设为2 * 1024 * 1024(2MB)到5 * 1024 * 1024(5MB)之间:太大易超时,太小增加 HTTP 开销 -
start = currentChunk * chunkSize,end = Math.min(start + chunkSize, file.size)——必须用Math.min防止最后一片越界 - 每次
formData.append('file', file.slice(start, end)),同时带chunk(当前序号,从 0 开始)、chunks(总片数)、fileId(服务端用它聚合)
accept、exts、size 怎么配合才不白设
前端限制只是第一道筛子,但设错就形同虚设。单位、顺序、组合方式都影响实际效果。
-
size单位是 KB,不是 MB:size: 5120表示 5MB;size: 5是 5KB,连一张图都可能超 -
accept: 'file'只是让系统选择框显示所有文件,毫无过滤力;exts: 'zip|rar'只校验后缀,用户改个后缀就能绕过 - 真正起效的是组合:
accept: 'file'+exts: 'zip|rar|7z'+acceptMime: 'application/zip,application/x-rar-compressed,application/x-7z-compressed' - 拖拽上传时
acceptMime失效,此时全靠before回调做file.type或魔数校验
断点续传不是开个开关就行,三件事缺一不可
chunked: true 这个参数根本不存在于 Layui 官方文档,网上所谓“开启断点续传”的写法纯属虚构。真实断点续传必须前后端协同完成三件事:
- 文件唯一标识:不能只靠文件名或大小,得用内容哈希(如 SparkMD5),且必须分块读取计算,否则大文件会卡死 UI
- 分片索引记录:前端存
localStorage或 IndexedDB,服务端存数据库或临时目录,记录哪些片已上传 - 已传分片查询接口:上传前先请求
/api/upload/check?fileId=xxx,拿到已传片列表,跳过重传
漏掉任意一个环节,用户暂停后重试,上传就会从第 0 片重新开始;网络中断再点上传,服务器可能收到重复分片却无感知。











