执照上传区域需用label包裹file input并隐藏原生控件，自定义虚线边框区域（2px dashed #999）、accept限制格式、onchange显示文件名与大小；Element Plus中el-upload应禁用自动上传、手动校验大小/类型/比例、上传后展示缩略图、文件名、时间戳及唯一ID以确保可追溯。
用 input type="file" 实现带框线的执照上传区域
不需要框架也能做出清晰、合规的执照上传入口。关键不是“多 fancy”，而是让用户一眼看出“这里该传执照”，且上传后能直观确认文件已就位。
常见错误是直接丢一个默认 <input type="file">，结果按钮样式不统一、无提示、无预览、无文件名反馈，用户传完都不知道成功没。
- 用
<label></label>包裹<input type="file">，隐藏原生 input，自定义一个带虚线边框的区域 - 设置
border: 2px dashed #999+padding: 40px 20px，中间加图标或文字（如“点击上传营业执照”） - 给
<input>加accept=".jpg,.jpeg,.png,.pdf"，限制只允许常见执照格式 - 用
onchange拿到event.target.files[0]，显示文件名和大小（比如“营业执照.pdf，1.2 MB”）
Element Plus 的 el-upload 怎么配出执照专用上传区
如果你项目里已用 Element Plus，el-upload 是更省心的选择，但默认样式太通用，得针对性调整才能突出“执照”属性。
重点不是换主题色，而是强化语义：让用户明确这是“上传执照”，不是随便传个附件。
立即学习“前端免费学习笔记（深入）”；
- 设
:auto-upload="false"，避免误触上传；用@change="handleFileChange"拿到文件对象再校验 - 在
slot="trigger"里写一个带图标的<div>，边框用 <code>border: 2px dashed #409eff，内文强调“营业执照（JPG/PNG/PDF，≤5MB）” - 上传前手动校验：
if (file.size > 5 * 1024 * 1024) { ElMessage.error('文件不能超过5MB') } - 预览区用
slot="file"自定义，显示文件名 + “✅ 已选中”小标签，不显示“上传成功”这类误导性文案（因为还没真传） - 检查
file.type：PDF 要是application/pdf，不是text/plain（有些浏览器会误判） - 对图片做简单尺寸判断：执照扫描件宽高比通常在 2:1 到 4:1 之间，异常比例可 warn（比如 1:1 的头像图）
- 表单提交时，确保
el-form的rules里有字段校验：{ required: true, message: '请上传营业执照', trigger: 'change' } - 禁用提交按钮直到
file存在且通过校验，而不是只靠视觉提示 - 上传成功后，在页面固定位置展示缩略图（PDF 用第一页截图）+ 文件名 + 上传时间（
new Date().toLocaleString()） - 加一个“重新上传”按钮，但旁边同步显示“上次上传：2026-09-20 14:32”，时间戳要真实可靠
- 如果后端返回了文件唯一 ID（如
file_id: "biz_abc123"），把它用<small></small>显示在角落，方便用户反馈问题时提供凭证 - 不要只依赖后端返回的 success 提示——网络抖动时可能收不到响应，但文件其实已上传成功
为什么不能跳过文件校验直接提交表单
执照文件一旦上传失败或格式错误，后续审核流程就卡住。前端不做校验，等于把问题留给后端或人工客服。
真实场景里，用户常传错三类文件：扫描件是模糊截图、PDF 是网页另存为的、或者传了公司logo图代替执照。这些必须在点击“提交”前拦截。
上传后怎么让执照信息可追溯、不可篡改
用户上传完成只是第一步。真正容易被忽略的是：上传成功后，页面上没有任何可验证的凭证，用户无法确认“我刚才传的就是这张执照”，下次进来还得重传。
这不是 UI 问题，是信任链断点。尤其涉及企业资质，必须让用户自己能核对。
