Tauri 2.0 实用功能：文件选择框和本地音频播放

meiki meiki
📁 Technology
TauriRust

记录两个在 Tauri 2.0 开发中常用的功能，都是第一次用时需要查文档才知道怎么做的。

打开文件选择框

Tauri 2.0 的文件选择框需要用 dialog 插件，不是内置的，要单独安装。

在项目根目录执行：

pnpm tauri add dialog

这条命令会自动做好几件事：

  • 添加 Cargo 依赖 tauri-plugin-dialog
  • 添加 npm 包 @tauri-apps/plugin-dialog
  • 在 capabilities/default.json 里加上 dialog:default 权限
  • 在 src-tauri/src/lib.rs 里注册插件

装完之后前端直接用：

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

const handleAdd = async () => {
    const file = await open({
        multiple: false,
        directory: false,
    });
    console.log(file); // 返回选中文件的路径
};

open 返回选中文件的路径字符串，multiple: true 时返回路径数组，directory: true 时可以选文件夹。

播放本地 mp3 文件

在 Tauri 里直接用本地路径给 <audio> 是不行的：

<!-- 这样不工作 -->
<audio src="/tmp/test.mp3" controls />

浏览器的安全策略不允许直接访问本地文件系统路径。Tauri 提供了 convertFileSrc 来把本地路径转换成可以在 WebView 里访问的 URL。

import { convertFileSrc } from '@tauri-apps/api/core';

const assetUrl = convertFileSrc('/tmp/test.mp3');
// 转换后类似 https://asset.localhost/tmp/test.mp3

然后把转换后的地址赋给 audio：

<audio :src="assetUrl" controls />

但这样跑起来还会报错：

Failed to load resource: unsupported URL

还需要在 tauri.conf.json 里开启 asset protocol：

{
    "app": {
        "security": {
            "assetProtocol": {
                "enable": true,
                "scope": ["**"]
            },
            "csp": "default-src 'self' ipc: http://ipc.localhost; img-src 'self' asset: http://asset.localhost"
        }
    }
}

scope 控制哪些路径可以被访问，** 是全部放行，生产环境可以收窄到具体目录。配好之后音频就能正常播放了。