必须用两个独立文件输入控件，正面name="id_card_front"、背面name="id_card_back"，配合accept、required及视觉引导预览，后端严格按name分离处理，禁止依赖顺序或文件名。

HTML 表单里怎么区分上传身份证正面和背面

不能只靠一个 <input type="file">，必须用两个独立的文件输入控件，各自绑定明确语义。浏览器不会自动识别“哪张是正/反面”，全靠前端命名和后端约定来区分。

常见错误是只放一个上传框、让用户自己写备注，结果后端拿到文件根本分不清——尤其批量上传时容易错位。

• 给正面上传控件加 name="id_card_front"，背面用 name="id_card_back"
• 用 accept="image/*,.pdf" 限制常见证件格式，避免用户误传压缩包或文档
• 加上 required 属性（如果业务强制要求两面都传）
• 别依赖 multiple 让用户一次选两张图再手动排序——顺序不可靠，移动端更易出错

怎么防止用户把正反面照片传反了

纯前端无法 100% 自动判断正反面，但能大幅降低传错概率。关键不是“识别”，而是“引导+校验”。

最有效的方式是视觉提示 + 明确文案 + 前端预览：

HTML Extract

使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...

下载

• 正面上传区旁标注「请上传带国徽和“居民身份证”字样的那一面」，背面写「请上传有持证人信息和签发机关的那一面」
• 上传后立即用 URL.createObjectURL() 生成预览图，放在对应位置下方，让用户肉眼确认
• 可加简单尺寸校验：身份证正面通常宽高比接近 3:2，背面接近 2:3，偏差过大时弹提示「图片比例异常，可能传错面」
• 不建议在前端做 OCR 或 AI 判别——兼容性差、性能拖慢、准确率不稳定

后端收到两个文件后怎么安全处理

前端传来的 name 是唯一可信标识，后端必须严格按 id_card_front 和 id_card_back 分离处理，不能靠文件名或顺序。

容易被忽略的风险点：

• 用户可能重复提交同一张图（比如正反面都传了正面），需检查两张图的 Content-MD5 或 SHA256 是否相同
• PDF 文件要限制页数：只取第一页（pdfjs-dist 或服务端 Ghostscript 解析），避免用户塞多页内容
• 图像需统一转为 JPG/PNG 并压缩，最大边不超过 2000px，防止超大文件触发 OOM 或上传超时
• 存储路径必须隔离：例如 /idcard/{user_id}/front.jpg 和 /idcard/{user_id}/back.jpg，禁止拼接用户可控的文件名

移动端拍照上传时的特殊处理

iOS Safari 和部分安卓 WebView 对 <input type="file"> 的摄像头调用行为不一致，容易导致拍完直接跳走、没触发 change 事件。

• 必须监听 change 事件，而不是 click 或 submit —— 拍照完成返回页面时才真正触发
• 加 capture="environment" 强制调用后置摄像头（证件照一般不用前置）
• 安卓微信内置浏览器可能禁用 capture，需降级为普通文件选择，并提示「建议用手机自带浏览器上传」
• 别用 FormData.append() 时漏掉 filename 参数，某些老版安卓会丢失扩展名，导致后端 MIME 类型解析失败

真正难的不是怎么传，而是怎么让前后端对“正面=国徽面”这个约定始终一致。一旦某次接口字段改名、某次前端漏传 name、某次后端按顺序取文件，整条链路就断了。留个日志字段记录每个文件的原始 name 和大小，排查时能省半小时。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！