大火导航器访问

Question

有人知道如何使以下代码工作吗？它来自： https://web.dev/文件系统 - 系统/＃访问the-origin-Provate-file-system

const root = await navigator.storage.getDirectory();
const fileHandle = await root.getFileHandle('Untitled.txt', { create: true });

最终，我试图访问我的Blazor网站创建的FIREM目录。我更喜欢原始目录，因为它不需要用户交互，并且在某种程度上受到了用户的保护。

绝对不要将其与键/对“ localstorage”功能混淆。我说的是真正的文件访问。

Answer 1

这是创建/写作/读取简单文本文件的基本示例。

<button @onclick=CreateFile>Create File</button>
<button @onclick=ReadFile>Read File</button>

@code
{
    [Inject] public IJSRuntime JS { get; set; } 

    async Task CreateFile()
    {
        var textToSave = await JS.InvokeAsync<string>("prompt","What is your name?");
        var jsDirHandle = await JS.InvokeAsync<IJSObjectReference>("navigator.storage.getDirectory");
        var jsFileHandle = await jsDirHandle.InvokeAsync<IJSObjectReference>("getFileHandle", "testfile", new { create = true });
        var jsFileStream = await jsFileHandle.InvokeAsync<IJSObjectReference>("createWritable");
        await jsFileStream.InvokeVoidAsync("write",$"You said your name is {textToSave} on {DateTime.Now}");
        await jsFileStream.InvokeVoidAsync("close");
        await JS.InvokeVoidAsync("alert", "File created");
    }
    async Task ReadFile()
    {
        var jsDirHandle = await JS.InvokeAsync<IJSObjectReference>("navigator.storage.getDirectory");
        var jsFileHandle = await jsDirHandle.InvokeAsync<IJSObjectReference>("getFileHandle", "testfile", new { create = true });
        var jsFile = await jsFileHandle.InvokeAsync<IJSObjectReference>("getFile");
        var fileText = await jsFile.InvokeAsync<string>("text");
        await JS.InvokeVoidAsync("alert", fileText);
    }
}

和一个现场样本： https：//blazorrepl.telerrik.com/mmmkaqgpl05snj72w42w42w42w42

Answer 2

多亏了Magoo先生的答案，我才能够增加Kristoffer Strube的文件系统访问库。在他的FileSystemAccessService.cs文件中，我补充说：

/// <summary>
/// Get handle to the exclusive origin directory for executing website
/// </summary>
/// <returns>handle to origin directory</returns>
public async Task<FileSystemDirectoryHandle> GetOriginDirectoryAsync()
{
    IJSInProcessObjectReference helper = await helperTask.Value;
    IJSObjectReference? jSFileHandle = await jSRuntime.InvokeAsync<IJSObjectReference>("navigator.storage.getDirectory");
    return new FileSystemDirectoryHandle(jSFileHandle, helper);
}

然后为了演示用法，我有以下内容：

//write/create
directoryHandle = await FileSystemAccessService.GetOriginDirectoryAsync();
var jsFileHandle = await directoryHandle.GetFileHandleAsync("testfile", new FileSystemGetFileOptions() { Create = true });
var jsFileStream = await jsFileHandle.CreateWritableAsync(new FileSystemCreateWritableOptions(false));
await jsFileStream.WriteAsync("hello");
await jsFileStream.CloseAsync();
// read
jsFileHandle = await directoryHandle.GetFileHandleAsync("testfile");
var jsFile = await jsFileHandle.GetFileAsync();
var fileText = await jsFile.TextAsync();