Question

我试图选择一个本地json文件并将其加载到我的blazor客户端组件中。

 <input type="file" onchange="LoadFile" accept="application/json;.json" class="btn btn-primary" />
protected async Task LoadFile(UIChangeEventArgs args)
        {
            string data = args.Value as string;
        }

P，S 我不理解，检索文件时是否需要同时跟踪文件名和内容？

Answer 1

我猜您正在尝试在客户端（Blazor）上读取JSON文件的内容，对吗？为什么不在服务器上！！

无论如何，args.Value只能为您提供文件名。为了读取文件的内容，可以使用FileReader API（请参见此处：https://developer.mozilla.org/en-US/docs/Web/API/FileReader）。这意味着您应该使用JSIntrop与FileReader API进行通信。但是，在开始之前，我建议您尝试找出该API是否已由社区实现（例如localStorage等）。您可能还需要将读取的内容反序列化为有意义的内容，例如C＃对象。

希望这对您有帮助...

Answer 2

有一个可以提供帮助的工具，但当前不支持3.0预览。 https://github.com/jburman/W8lessLabs.Blazor.LocalFiles

（与开发者无关）

Answer 3

输入控件将为您提供文件的位置以及完整的路径以及文件名。然后，您仍然必须检索文件并将其下载到服务器。

最新响应，但在3.1中，您可以通过NuGet下载一个附加的AspNetCore.Components模块，以访问HttpClient扩展。这些使事情变得简单：

// fetch mock data for now
var results = await _http.GetJsonAsync<WellDetail[]>("sample-data/well.json");

您可以从输入控件中插入文件的位置，以代替“ sample-data / well.json”字符串。

类似的东西：

using Microsoft.AspNetCore.Components;

private async Task<List<MyData>> LoadFile(string filePath)
{
  HttpClient _http;

  // fetch data 
  // convert file data to MyData object
  var results = await _http.GetJsonAsync<MyData[]>(filePath);

  return results.ToList();
}

如何使用Blazor上传本地json文件

3 个答案: