在 Layui 上传组件中,choose回调是执行 MD5 文件校验的唯一可行时机。因为它能够访问File对象,借助FileReader对二进制内容进行分片读取,并结合SparkMD5.ArrayBuffer实现增量哈希计算,最终将校验结果挂载到obj对象上,供before回调拦截或上传请求使用。

先明确一个核心认知:在 Layui 上传组件里,before 回调无法获取 File 对象,而 done 和 error 触发时请求已经发出。要实现文件去重与重复上传拦截,唯一的操作窗口就是文件被选中之后、正式上传之前——这个窗口恰好落在 choose 回调中。只有它才能拿到 obj.files[0],也只有它能够利用 FileReader 把二进制内容分片读取出来。
choose 回调:前端 MD5 校验与文件去重的唯一窗口
具体操作时,有几个关键约束需要遵守:
- 必须使用
File.slice()对文件进行切块,推荐每块大小为2 * 1024 * 1024(2MB)。切忌用readAsText(file)全量读取,否则上百兆文件会直接阻塞 UI 线程。 - MD5 计算应选用
SparkMD5.ArrayBuffer做增量追加,每读取一块就调用spark.append(e.target.result),最后只执行一次spark.end()。不少开发者第一次调用后再次获取结果时发现返回空字符串——这是因为 SparkMD5 内部状态已被清空,计算出的哈希值必须立即保存到变量中。 - 计算完成的
md5值需要手动挂载到obj上,例如obj.md5 = md5Value。这样一来,后续的before回调或上传参数中都能直接引用该值。 - 如果需要服务端进行哈希比对以实现秒传去重,记得在
obj.upload()之前把 md5 塞入表单数据:obj.upload({data: {fileMd5: md5Value}})
before 回调:基于 MD5 哈希值拦截重复上传的实践方法
before 回调本身不操作文件内容,但它能读取你在 choose 中挂载的 obj.md5。此时可以发起异步校验,比如查询服务端是否已存在该哈希值:
- 必须返回
Promise,并且只有reject才能成功拦截上传:return new Promise((resolve, reject) => { $.get('/api/check-md5', {md5: obj.md5}, res => res.exists ? reject('已存在') : resolve()); }) - 一个常见的误区:有人写成
return $.get(...).then(() => false)——这个false被resolve包裹后,上传仍然会照常进行,根本起不到拦截作用。 - 如果仅做前端简单校验(如比对黑名单哈希),可以同步
return false,但需要 Layui 版本 ≥ v2.6.8 才能生效。 - 多文件场景下需要留意:
obj.getChooseFiles()返回的是FileList,必须先转为真数组才能逐个处理:Array.from(obj.getChooseFiles())
chunked 分片上传与 MD5 校验的协作关系
chunked: true 只负责将文件切成多个分片并依次发送请求,它既不生成也不校验 MD5,更不提供断点续传能力。你仍然需要在 choose 回调中独立完成 MD5 计算,然后将结果传递给后端,后端才能据此实现分片去重或秒传判定。
- 后端配合逻辑:收到
fileMd5后,先检查该文件是否已完整上传;若已存在,直接返回成功,跳过所有分片请求。 - 如果文件未完整上传但已有部分分片,后端应返回已上传的分片索引,前端据此跳过对应块——这部分逻辑完全不在 Layui 的能力范围内,需要自行实现。
- 不要指望
chunked自动帮你“识别”重复文件,它连文件名都不校验,只负责按顺序发送分片请求。
归根结底,真正的难点不在于代码量多少,而在于分片读取时的内存控制,以及 spark.end() 的调用时机。很多开发者第一次调用后第二次再去获取结果发现已变空,其实就是忽略了 SparkMD5 内部状态会清空这一特性——拿到哈希值后立刻存入一个变量,后续直接引用即可。
