Tauri 初学者必备：轻松解决本地文件访问踩坑指南

2023-11-06 07:52:04

在 Tauri 中访问本地文件：初学者指南

概述

Tauri 作为一款现代前端框架，让开发者能够轻松构建桌面应用程序。然而，由于其沙盒机制，默认情况下 Tauri 应用程序无法直接访问本地文件。这可能会导致诸如加载本地媒体或保存用户数据等任务受阻。本文将深入探讨 Tauri 中的本地文件访问问题，提供详细的步骤和示例代码，以帮助初学者轻松克服这一挑战。

了解沙盒机制

Tauri 的沙盒机制源自 Chromium，将应用程序划分为孤立的进程，每个进程拥有独立的内存空间和文件系统。这种机制有效防止恶意软件在系统中肆虐。在 Tauri 中，主进程负责用户交互，而渲染进程负责渲染网页。由于渲染进程无法直接访问本地文件，因此需要在主进程中进行特定配置，才能让渲染进程访问本地文件。

授予文件权限

第一步是授予 Tauri 对所需文件夹的访问权限。这可以通过编辑 Tauri 项目根目录下的 tauri.conf.json 文件来实现。在 security 对象中添加以下代码：

"security": {
  "fileAccess": {
    "allow": [
      {
        "path": "/Users/my_username/Documents"
      }
    ]
  }
}

上述代码授予了 Tauri 对 /Users/my_username/Documents 文件夹的访问权限。可以根据需要修改路径，以授予对其他文件夹的访问权限。

启用 WebView

接下来，需要启用 WebView，这是允许在 Tauri 中加载网页的组件。在 Tauri 项目的 src-tauri 目录下，打开 index.html 文件。在 <body> 标签内添加以下代码：

<webview src="index.html"></webview>

此代码将在 WebView 中加载 index.html 文件。

访问本地文件

现在，就可以在 WebView 中访问本地文件了。渲染进程可以使用 window.openFile 函数打开本地文件。该函数的用法如下：

window.openFile((files) => {
  // 在此处处理选定的文件
});

window.openFile 函数接收一个回调函数作为参数，当用户选择文件后，该回调函数会被调用。回调函数的参数是一个包含所选文件的文件对象的数组。

代码示例

以下是一个完整的代码示例，演示如何在 Tauri 中打开本地图像文件：

const openFile = document.querySelector("#open-file");

openFile.addEventListener("click", () => {
  window.openFile((files) => {
    const file = files[0];
    const reader = new FileReader();

    reader.onload = () => {
      const img = document.querySelector("#image");
      img.src = reader.result;
    };

    reader.readAsDataURL(file);
  });
});