Layui上传组件上传前MD5校验防止重复上传

在 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 内部状态会清空这一特性——拿到哈希值后立刻存入一个变量，后续直接引用即可。