如何获取已上传本地文件的引用 | JavaScript FileReader 相关问题

你的需求可以实现，但受浏览器安全沙箱限制，无法直接通过保存文件系统原始路径的方式实现，浏览器默认禁止JavaScript读取、存储本地文件的真实系统路径，避免恶意网站窃取用户文件系统隐私信息，你可以用以下两种方案实现类似效果：

目前Chromium内核浏览器（Chrome、Edge、Opera等）已经支持该API，你可以通过它拿到可持久化的文件句柄，完全符合你的需求：

• 用户导入文件时，使用window.showOpenFilePicker()替代传统的<input type="file">选择器，调用后可以拿到FileSystemFileHandle类型的文件句柄对象
• 申请读权限后，你可以直接通过句柄读取文件内容，不需要用户重复选择文件
• 把句柄序列化后存入IndexedDB（localStorage无法存储复杂对象，必须使用IndexedDB），下次打开应用恢复进度时，直接从IndexedDB取出句柄即可读取对应文件
• 如果原文件被移动、删除，调用句柄读取文件时会抛出错误，你可以直接捕获错误做对应提示即可

注意：该API目前仅支持桌面端Chromium内核浏览器，Safari、Firefox以及移动端浏览器支持度较低，需要做降级兼容。

如果需要兼容不支持File System Access API的浏览器，可以用半自动化的实现方式：

• 第一次用户导入文件时，记录文件的名称、大小、最后修改时间三个参数作为唯一标识，和进度数据一起存入本地存储
• 下次恢复进度时，弹窗提示用户手动选择原文件，用户选择完成后你比对三个参数，匹配成功就自动加载对应进度，匹配失败则抛出文件失效的报错
• 该方式不需要存储完整文件内容，仅需要存储少量标识信息，唯一缺陷是需要用户手动重新选择一次文件，无法实现静默加载。

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