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

Question

我正在尝试 select 本地 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 有一个额外的 AspNetCore.Components 模块，您可以通过 NuGet 下载以访问 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 文件

How to upload a local json file using Blazor

file

input

blazor