应使用input.files[0].name获取文件名，因value受浏览器安全限制仅显示伪路径（如c: akepath），不可靠；files是只读filelist对象，需在change事件中访问，多选时遍历提取各files[i].name。
用 input[type="file"] 的 files 属性读取文件名
表单提交本身不会把文件名作为独立字段发给后端，必须通过 JavaScript 主动提取。核心是监听 input 元素的 change 事件，然后访问其 files 属性——它是一个 FileList 对象，哪怕只选一个文件也要用索引取。
-
files[0].name是最常用方式，返回原始文件名（含扩展名），比如"report.pdf" - 如果允许多选（
multiple），需遍历files，每个files[i].name都是独立文件名 - 注意：
files是只读的，且在表单重置或页面刷新后清空，不能靠 DOM 查询“回溯”
为什么不能用 value 属性获取文件名
input[type="file"] 的 value 在大多数浏览器里只显示伪路径（如 "C: akepathphoto.jpg"）或为空，这是安全限制，防止脚本窥探用户本地文件系统结构。依赖 value 提取真实文件名会失败或不可靠。
- Chrome / Edge 显示
fakepath，Firefox 可能只显示文件名，Safari 行为更不一致 -
value是只读字符串，无法解析出可靠信息，切勿用.split('\').pop()或正则硬抠 - 唯一可信赖的来源只有
files对象
提交前把文件名塞进隐藏字段供后端接收
如果后端需要文件名作为普通表单字段（比如和上传 URL 分离处理），得手动同步到一个 input[type="hidden"] 中，而不是指望浏览器自动提交。
- 在
change回调里设置：document.getElementById('filename-input').value = fileInput.files[0]?.name || '' - 注意处理未选文件的情况（
files.length === 0），避免undefined.name报错 - 如果文件输入框被动态替换或克隆，
files属性不会继承，需重新绑定事件
服务端收到的文件名是否可信
前端传来的文件名完全可控，不能直接用于保存或路径拼接。后端必须做校验、重命名或存入数据库时分离原始名与存储名。
- 攻击者可伪造任意
filename字段（包括路径遍历如"../etc/passwd"） - 即使用了
files[0].name，用户仍可在 DevTools 里改掉隐藏字段值 - 真正安全的做法：服务端忽略原始名，用 UUID + 时间戳生成存储名，原始名仅作元数据存库
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
