控制台报错:
code length overflow. (1660>1056)
at QRCodeModel.createData (qrcode.js:105:54)
是 二维码字符串过长 导致的,根本原因是二维码库当前 version: 20 对应的最大容量不够存放你生成的密文 URL。
-
为什么会超出容量
在你代码中,二维码最终承载的是:
elText = "https://www.cadifkyy.com/appuser/goPageOut.do?sgData=" + encryptedAES(str);
其中 encryptedAES(str) 使用 AES CBC PKCS7 加密,生成的 Base64 串本身就比较长。
AES 加密后字符串体积通常比原始字符串增长 30%~35%,再加上你的 URL 前缀,长度会暴增。
从错误信息可知:
● 二维码当前容量上限:1056 字节
● 你实际的字符串长度:1660 字节
所以直接报错。
-
解决方案
方案1:自动调整二维码版本
目前你写死了 version: 20:
var qrcode = new QRCode(document.getElementById("qrcode"), {
version: 20,
width: 200,
height: 200
});
改成 自动选择版本(设置为 0),库会根据数据自动匹配合适的 QR Code 版本,最大支持 40 版本:
var qrcode = new QRCode(document.getElementById("qrcode"), {
version: 0, // 自动计算
width: 200,
height: 200
});
版本对容量的影响:
● Version 20 最大 1056 字节
● Version 40 最大 2953 字节
你现在的 1660 字节,只要调到 40 版本就能承载。
方案2:降低纠错等级(errorCorrectionLevel)
二维码的纠错等级默认为 M 或 H,H 虽然稳定,但容量最小。
可以手动设置为 L,以增加可容纳的数据量:
var qrcode = new QRCode(document.getElementById("qrcode"), {
version: 0,
width: 200,
height: 200,
correctLevel: QRCode.CorrectLevel.L
});
纠错等级 容量 说明
L 最大 可修复 7% 错误
M 中等 可修复 15% 错误
Q 高 可修复 25% 错误
H 最强 可修复 30% 错误
方案3:优化加密内容,减少字符串长度(推荐)
目前 sgData 直接放完整 AES 加密结果,这会很长。
最佳实践是 二维码只存短码或ID,其他信息放在后端数据库中,扫码后通过短码去还原数据。
改造思路:
- 后端生成一条记录,并返回唯一短码,例如 abcdef12;
- 二维码内容改为:
https://www.cadifkyy.com/appuser/goPageOut.do?code=abcdef12 - 前端扫描后,后端通过 code 查询实际数据,执行后续逻辑。
这样二维码长度可以压缩到 几十字节以内,永远不会溢出。
方案4:确认 AES 输出为 URL Safe Base64
AES 输出如果含有 +、/、= 这类符号,Base64 在 URL 中会变长,还需要 URL 编码一次,体积进一步增加。
如果后端能支持,可以考虑 URL Safe Base64,替换字符,减少编码膨胀。
-
最小修改示例
如果你只是想先让它工作,可以直接这样改:
var qrcode = new QRCode(document.getElementById("qrcode"), {
version: 0, // 自动选择二维码版本
width: 200,
height: 200,
correctLevel: QRCode.CorrectLevel.L // 降低纠错等级
});
-
调试方法
在生成二维码前打印最终字符串长度:
console.log("二维码内容长度:", elText.length);
二维码能否正常生成可参考以下大致阈值:
版本号 L 级可承载字节数
20 1056
30 1748
40 (最大) 2953
如果长度仍然超过 2953 字节,就必须执行 方案3,缩短内容。
总结
● 你的数据量超出了版本 20 的上限;
● 最直接的方法:version: 0 并降低纠错等级;
● 根本解决:二维码只存短码或ID,后端解析,避免存放冗长的加密数据。