Tauri2.0本地实现导入导出，有坑！

最近做数据的导入导出，本来是想做后端操作，但是因为数据量不是很大，所以本地操作应该是最优的选择。

导入

使用window.showOpenFilePicker方法选择文件
获取文件对象数据
读取文件数据
通过接口批量导入数据

js 复制代码

async function handleImport() {
    let msgImportLoading;
    try {
        msgImportLoading = message.loading('导入文件中...', 0);
        const [fileHandle] = await window.showOpenFilePicker({
            types: [
                {
                    description: '密码数据',
                    accept: {
                        'application/json': ['.json']
                    }
                }
            ]
        });
        const file = await fileHandle.getFile();
        const fileText = await file.text();
        await SystemApi.saveData(fileText)
        msgImportLoading();
        message.success('导入数据成功');
    } catch (error) {
        msgImportLoading();
        if (error instanceof SyntaxError) {
            message.error('解析文件失败');
        } else {
            message.error('导入文件失败');
        }
    }
}

导出

Tauri1.0版本的导出和2.0版本的导出差距较大，大家可以看一下文件系统插件迁移。

先配置权限，找到src-tauri/capabilities/default.json文件，添加读写的权限

json 复制代码

{
    "permissions": [
        ...
        {
            "identifier": "fs:read-all"
        },
        {
            "identifier": "fs:write-all"
        },
    ]
}

通过plugin-dialog对话框选择存储的文件路径
通过writeTextFile方法存储文件数据

js 复制代码

import {save} from '@tauri-apps/plugin-dialog';
import {writeTextFile, BaseDirectory} from '@tauri-apps/plugin-fs';

async function handleExport() {
    let loading = message.loading('下载中...', 0);
    try {
        let passwordData = dataSource.value;
        const filePath = await save({
            title: '请选择保存位置',
            filters: [{
                name: 'JSON',
                extensions: ['json']
            }]
        })
        if (!filePath) {
            loading();
            return false;
        }
        await writeTextFile(filePath, JSON.stringify(passwordData));
        loading();
        message.success('导出密码成功!');
    } catch (e) {
        loading();
        console.log(e);
        message.error('导出异常!');
    }
}