Electron+Angular中如何获取<input>文件选择域的真实本地文件路径

首先给明确结论：普通公网Web应用没有任何合规方法能拿到用户上传文件的真实本地路径，这个限制是浏览器底层强制加的，绕不开。

为什么你拿不到真实路径 #

• 你看到的fakepath/xxx不是代码bug，是所有现代浏览器统一实现的安全规则：如果网页能随便获取用户本地文件的绝对路径，恶意站点就可以结合其他漏洞扫描、窃取用户本地的隐私文件，因此W3C标准明确要求file input控件必须隐藏真实本地路径，这个沙箱限制和你用Angular、Vue还是原生JS写前端没有关系，没有任何前端JS API可以突破。
• 你尝试用Node.js的fs模块找方案的思路走不通：Angular代码是跑在用户浏览器里的，根本碰不到用户本地的Node运行时，自然调不了fs；如果你是在自己的服务端用fs，那读写的是你服务器自己的文件系统，和用户的电脑完全没关系，当然找不到用户的文件路径。

关于你存路径到数据库的需求 #

这个需求在Web场景下本身就没有实际意义：

• 就算你用非常规手段拿到了用户的本地路径，你的服务端也不可能跨网络访问用户电脑上的文件，这串字符串除了泄露用户隐私没有任何用处；
• 用户本地的文件位置随时会变，今天放桌面明天移到其他盘，你存的路径很快就会失效。

如果要持久化管理用户上传的文件，正确的做法是：

1. 前端拿到File对象后，通过接口把文件完整上传到服务端；
2. 服务端把文件存到自己的磁盘、对象存储等可控的存储位置，生成唯一文件ID，把文件ID、服务端存储路径、原始文件名、上传时间这些信息存到数据库就行，后续要访问文件直接通过你自己服务端的地址读取即可。

只有你开发Electron/Tauri这类本地桌面应用、或者用户主动安装了你开发的私有浏览器扩展并授予了本地文件访问权限时，才有可能拿到真实文件路径，但这类场景不属于普通Web应用的覆盖范围，面向公众用户的网站完全做不到这一点。

内容的提问来源于stack exchange，提问作者juniorDev