【Tauri2.0教程（七）】在应用中显示本地磁盘上的多媒体文件

1.说明

在【Tauri2.0教程（四）】对话框插件的使用)中已经讲过打开文件的对话框。打开文件传给程序的本质是一个文件在磁盘中的绝对路径。

通过磁盘绝对路径在vue中是无法正常显示图片或者视频等多媒体文件的，本文主要介绍如何在应用中显示磁盘中的多媒体文件。

2.tauri.conf.json配置

在src-tauri/tauri.conf.json的app中添加如下内容:

"security": {
  "csp": "default-src 'self' ipc: http://ipc.localhost; img-src 'self' asset: http://asset.localhost",
  "assetProtocol": {
    "enable": true,
    // 下面配置的是允许访问的系统目录，如果这里不配置，程序中只能加载通过弹窗选择出来的多媒体文件，其他文件会报403. 下面添加了一些常用目录。allow数组中支持的其他参数需要参考： https://v2.tauri.app/reference/config/#fsscope
    "allow": [
      "$APPDATA/assets/**",
      "$APPDATA/**",
      // 本行表示，可以访问系统Downloads目录下面的文件，但是不能访问Downloads下面目录的文件，比如~/Downloads/test下面的文件是不支持的
      "$DOWNLOAD/*",
      // 本行表示可以访问DESKTOP及其子目录下的所有文件
      "$DESKTOP/**"
    ]
  }
}

上面第六行数组为空，前端控制台会报错：Failed to load resource: the server responded with a status of 403 (Forbidden)

后端rust控制台会报错： [ERROR] asset protocol not configured to allow the path: C:\Users\xxx\Downloads\bread.jpg

3.前端

js写入如下内容：

// 引入 convertFileSrc 方法
import {invoke, convertFileSrc} from '@tauri-apps/api/core';
const msg = ref('');
const sourceSrc = ref('');

async function openFile() {
  // 使用tauri插件进行打开文件操作
  const file = await open({
    multiple: false,
    directory: false,
    filters: [{ name: "Images", extensions: ["png", "jpg", "jpeg", "gif", "webp"] }],
  });
  console.log(file);

  if (file){
    // 转换绝对文件路径
    sourceSrc.value = convertFileSrc(file)
    invoke('upscale_image', {input: file, suffix: 'png'})
        .then((message) => {
          console.log(message)
          msg.value = message
        })
        .catch((error) => {
          console.error(error)
          msg.value = "err: " + error
        })
  }
}

vue

<img :src="sourceSrc" v-if="sourceSrc.length > 5" alt="暂无图片">

后端内容省略。。。

完成以上内容以后就可以在前端页面正常显示图片等多媒体文件了。