代码之家 › 专栏 › 技术社区 › Bercovici Adrian

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

blazor input file

-2

Bercovici Adrian · 技术社区 · 6 年前

我正在尝试选择一个本地 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;
        }

我不明白,检索文件时是否需要同时跟踪文件名和内容?

1 回复 | 直到 6 年前

1

enet 6 年前

我猜您正在尝试读取客户端(Blazor)上JSON文件的内容,对吗?为什么不在服务器上呢!?

无论如何,args.Value只能为您提供文件名。为了读取文件的内容,可以使用FileReader API(请参见此处: https://developer.mozilla.org/en-US/docs/Web/API/FileReader

希望这有助于。。。

2

0

Jim Gilmartin 6 年前

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

3

0

Adam Murray 5 年前

输入控件将以完整路径和文件名的形式为您提供文件的位置。然后您仍然需要检索文件并将其下载到服务器。

延迟响应,但在3.1版本中,有一个额外的AspNetCore.Components模块,您可以通过NuGet下载以访问HttpClient扩展。这使问题变得简单:

// fetch mock data for now
var results = await _http.GetJsonAsync<WellDetail[]>("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();
}