HTML5上传前无法真正校验服务端权限，必须依赖预检接口（如/api/upload/permit）在点击上传前主动校验；即使预检通过，服务端仍需在接收文件时二次校验权限、文件类型与大小，且前端提示须明确失败原因。
HTML5 上传前无法真正校验服务端权限
浏览器里用 <input type="file"> 选文件时，前端拿不到用户真实路径，也查不了服务端的权限状态。所谓“上传权限校验”，本质是「先确认能传，再传」，不是在 change 事件里拦住文件选择——那拦不住，也拦得没意义。
必须依赖服务端预检接口（如 /api/upload/permit）
用户点击上传前，前端应主动调用一个轻量 API，由后端判断当前用户是否具备上传资格（比如角色、目录写权限、配额余量等）。这个接口不碰文件内容，只返回布尔或详细拒绝原因。
- 成功响应示例：
{"ok": true, "maxSize": 10485760} - 失败响应示例：
{"ok": false, "reason": "quota_exceeded"} - 务必在
fetch()或axios请求中处理网络超时、401、403 等状态码，不能只看 JSON 的ok字段 - 避免把权限逻辑写在前端：不要用
localStorage缓存“有权限”状态，会过期且不可信
FormData 提交时仍需服务端二次校验
即使预检通过，真实上传时仍要校验。因为两次请求之间权限可能变化（如管理员即时禁用某用户），或用户绕过前端直接发请求（如用 Postman 构造 FormData）。
- 后端收到
multipart/form-data后，必须重新查用户身份和目标路径权限 - 不要信任前端传来的
filename或content-type，它们可被篡改；服务端应以实际文件头和扩展名白名单为准 - 上传中间件（如 Express 的
multer）配置limits.fileSize是基础防护，但不能替代业务权限逻辑
用户反馈要具体，别只说“无权限”
前端拿到预检失败响应后，提示语必须明确原因，否则用户无法行动。例如：
立即学习“前端免费学习笔记（深入）”；
-
"您本月上传配额已用完（剩余 0 MB）"→ 引导联系管理员 -
"当前目录仅允许管理员上传"→ 隐藏上传按钮，或置灰并 tooltip 说明 -
"不支持该文件类型（仅允许 .pdf, .docx）"→ 在input.accept基础上再做 JS 校验，提升体验
真正的难点不在 HTML5 本身，而在于前后端如何协同定义“权限边界”——比如是按用户、按目录、按文件类型、还是按时间窗口？这些规则一旦模糊，前端无论怎么拦截都只是障眼法。
