如何在我的 Blazor 服务器应用程序中的 javascript 函数中使用选定的文件？

Question

在我的 Blazor 服务器应用程序中，用户可以从本地驱动器中选择文件。 现在应该在 Javascript 中本地分析该文件，并将结果发送回 Blazor。 调用 Javascript 函数不是问题，但我在 Javascript 中使用该文件时遇到问题。在 C# 部分，它是一个 IBrowserFile。

我需要这样做是因为文件很大，所以我需要防止不必要的上传。在 javascript 方面，我使用 Mediainfo.js 来分析文件。

我是 Blazor Server 的新手，但据我了解，C# 代码完全在服务器上运行，因此我找到的解决方案不起作用，因为它们总是在 C# 中进行一些文件转换，并且必须上传文件拳头。

如果能找到解决方案就太好了。

Answer 1

如果您使用c#代码来获取文件

IBrowserFile

，则必须将整个文件上传到服务器，因为c#代码将在服务器中处理。所以你必须直接获取文件而不用c#。然后当 javascript 处理完成时将数据返回给 c#。例如以下返回文件大小作为处理后的数据。

@inject IJSRuntime JS

<input type="file" id="fileInput"  />
<br />
<button @onclick="ProcessData">Prosss Data</button>
<br />
FileSize:@FileSize bytes

<script>
   
    async function processFile(Id){
        const fileInput = document.getElementById(Id);
        var fileSize = fileInput.files[0].size;
        return fileSize;
    }
</script>

@code{
    private int FileSize = 0;
    private async Task ProcessData()
    {
        FileSize=await JS.InvokeAsync<int>("processFile","fileInput");
    }
}