Tauri 打開本地文件踩坑

最近我在嘗試使用Tauri，遇到一個問題，其實從事后來看，如果熟悉Tauri的api的話，是件分分鐘就能解決的事情，但由于思維慣性，實際卻困擾了我一整天，寫文記錄一下我踩坑的過程。

需求

需求很簡單，就是打開本地圖片進行展示，同時還要能拿到圖片在本地的絕對路徑。

• 展示圖片
• 拿到絕對路徑

<input type="file" >存在的問題

最先想到辦法，當(dāng)然是使用input元素，這是前端讀取本地文件的常規(guī)方案，而且我曾經(jīng)使用electron實現(xiàn)過一樣的功能，大致就是：

<input type="file" id="file-selector" />

document.getElementById("file-selector").addEventListener('change', e => {
    const files = e.target.files
    files.forEach(file => {
        const url = URL.createObjectURL(file)
        const path = file.path
    })
})

但遺憾的是，Tauri的File對象并沒有實現(xiàn)path這個屬性。

出于安全考慮，瀏覽器并沒有提供File對象的絕對路徑，path是electron自己提供的：electron/file-object.md at main · electron/electron (github.com)。

隨后，盡管想了各種辦法，比如引入file-selector之類的，但最終的結(jié)論是：input拿不到文件的絕對路徑。

Dialog打開文件

我在心里吐槽“Tauri果然是不如electron”之后，我決定去Github上搜一下issue，不出所料，不只我一個人遇到這個問題：

Getting a real path of file type input · Issue #87

這里面給出了一個拿到文件絕對路徑的辦法，那就是使用Dialog

首先在tauri.conf.json添加配置：

"allowlist": {
    "dialog": {
        "all": false,
        "open": true
    }
}

然后

import { open } from "@tauri/api/dialog"
async handler(){
  let file = await open()
}

open方法會像input file一樣打開一個文件選擇框，返回文件的絕對路徑。

如果想一次選擇多個文件，可以添加選項：

let files = await open({ multiple: true })

實際嘗試發(fā)現(xiàn)，這樣確實能拿到文件的絕對路徑，但也只有絕對路徑。

于是我就陷入了困境：通過input可以展示圖片，但拿不到絕對路徑，而dialog可以拿到絕對路徑，卻無法顯示圖片，因為前端無法直接通過一個本地的絕對路徑來展示圖片。

怎么辦呢？

fs讀取文件

于是，我開始考慮使用Tauri提供的fs API，利用絕對路徑來讀取文件內(nèi)容，然后再轉(zhuǎn)換成Blob對象。

配置tauri.conf.json

"allowlist": {
    "dialog": {
        "all": false,
        "open": true
    },
    "fs": {
        "all": false,
        "readFile": true,
    }
}

讀取文件并轉(zhuǎn)換：

import { readBinaryFile } from '@tauri-apps/api/fs';
import { open } from "@tauri/api/dialog"
async handler(){
  // 打開文件獲取絕對路徑
  let files = await open({ multiple: true })
  files.forEach(async filePath => {
      // 讀取二進制文件
      const contents = await readBinaryFile(filePath)
      // 轉(zhuǎn)換為blob對象，然后轉(zhuǎn)換為url
      const blob = new Blob([contents])
      const url = URL.createObjectURL(blob)
  })
}

但是，正如我預(yù)期的那樣，這么做有嚴(yán)重的性能問題。

經(jīng)簡單測試，打開100張圖片（每張400kb左右）需要好幾秒鐘才能完成，打開500張圖片更是花了約20秒才處理完畢。

而如果使用input file，500張圖片只要一兩秒就能搞定。

所以，雖然功能上已經(jīng)沒有問題，但性能問題無法忽視，看來還需要找找別的辦法。

最終解決辦法

經(jīng)過一整天的摸索，我最終找到了Tauri提供這個函數(shù)：convertFileSrc，可以將一個絕對路徑轉(zhuǎn)換為類似于URL.createObjectURL那樣的URL。

值得一提的是，這個函數(shù)和最常用的 invoke處于同一個模塊內(nèi)，而且在Tauri的文檔中，convertFileSrc甚至位于invoke之前，但我卻一直沒有注意到它，一方面是因為，之前從沒有想過要使用絕對路徑來轉(zhuǎn)換URL，因為純前端是做不到這一點的；另一方面，由于思維慣性，前端打開本地文件往往都是用的input file，遇到這個問題我一直想的是如何從input事件著手，沒有去仔細(xì)看文檔……這就是所謂的燈下黑嗎

首先，配置tauri.conf.json

{
    "allowlist": {
        "dialog": {
            "all": true,
            "open": true
        },
        "protocol": {
            "all": false,
            "asset": true,
            "assetScope": [
                "$PICTURE"
            ]
        }
    },
    "security": {
        "csp": "default-src 'self'; img-src 'self'; asset: https://asset.localhost"
    }
}

然后

import { convertFileSrc } from '@tauri-apps/api/tauri'
import { open } from "@tauri/api/dialog"
async handler(){
  let files = await open({ multiple: true })
  files.forEach(filePath => {
      const url = convertFileSrc(filePath)
  })
}

速度和HTML原生的input file差不多，雖然拿不到文件大小之類的信息，但至少我最需要的兩個需求可以實現(xiàn)了，只要有了絕對路徑，文件大小之類的可以交給Rust。

以上就是Tauri 打開本地文件踩坑分析解決的詳細(xì)內(nèi)容，更多關(guān)于Tauri 打開本地文件踩坑的資料請關(guān)注腳本之家其它相關(guān)文章！