从Electron迁移到Tauri：如何在JS中获取HTML输入的文件路径？

问题原因 #

Tauri基于标准WebView实现，遵循浏览器安全规范，原生<input type="file">返回的File对象不会暴露真实文件路径——这和Electron修改Chromium行为、额外提供file.path属性的机制不同。你需要改用Tauri官方提供的Dialog API来获取文件路径，而非依赖原生input的change事件。

步骤1：确认权限配置 #

确保tauri.conf.json中的权限白名单已正确配置，至少开启dialog.open权限（如果后续需要读写文件，可补充fs相关权限）：

{
  "tauri": {
    "allowlist": {
      "dialog": {
        "open": true
      },
      "fs": {
        "allow": ["**"] // 根据需求限制路径范围，比如只允许用户目录则写"$HOME/**"
      }
    }
  }
}

步骤2：替换为Tauri Dialog API实现 #

放弃原生<input type="file">，改用Tauri的对话框API触发文件选择，直接获取真实路径：

修改后的HTML

<button id="select-pdf-btn">选择PDF文件</button>

修改后的JS代码

import { open } from '@tauri-apps/api/dialog';

document.getElementById('select-pdf-btn').addEventListener('click', async () => {
  try {
    // 打开单文件选择对话框，仅允许PDF格式
    const selectedPath = await open({
      filters: [{ name: 'PDF文件', extensions: ['pdf'] }],
      multiple: false
    });

    if (selectedPath) {
      // selectedPath即为选中文件的完整路径
      const pathUrl = selectedPath;
      savePath(); // 执行你的路径保存逻辑
    }
  } catch (err) {
    console.error('文件选择失败:', err);
  }
});

补充说明 #

如果必须保留原生<input type="file">，则无法直接获取真实路径——这是Web安全机制限制，Tauri不会绕过该规则。因此推荐使用上述Tauri官方API方案，这也是Tauri项目中获取文件路径的标准做法。

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