使用 ASP.Net Core SDK 3.0 preview8（Blazor 框架）上传图片答案

【问题标题】：Uploading image using ASP.Net Core SDK 3.0 preview8 (Blazor framework)使用 ASP.Net Core SDK 3.0 preview8（Blazor 框架）上传图片
【发布时间】：2020-01-01 06:08:12
【问题描述】：

我需要使用 Blazor Framework 使用 ASP.Net Core SDK 3.0 preview8 上传 DICOM 图像。

在这种情况下是否需要 JSInterop？这对解决问题有什么帮助？

在这种情况下需要遵循哪些步骤？一个示例代码会很有用.....

【问题讨论】：

标签： javascript c# razor asp.net-core-mvc blazor

【解决方案1】：

我想你可以使用 blazor 文件阅读器：https://github.com/Tewr/BlazorFileReader 将其上传到字节数组，然后用它做你想做的事。

【讨论】：

【解决方案2】：

正如@Kornelis 提到的，您可以使用 BlazorFileReader 来获取文件的字节流。我正在使用库。以类似的方式上传文件。我只是不上传到服务器，而是在 Azure Blob 存储中为 blob 创建 sas 令牌，并使用存储 REST API 上传文件数据。

从输入的 html 元素加载文件：

<input  type="file" @ref="@inputTypeFileElement" @ref:suppressField />

注意：目前在 prev8 中有一个已知的错误，在这种情况下使用 @ref。这样就需要@ref:suppressField。

使用库获取文件流：

foreach (var file in await fileReaderService.CreateReference(inputTypeFileElement).EnumerateFilesAsync())
{
     using (Stream stream = await file.OpenReadAsync())
     {
         await viewModel.UploadAsync(stream);
     }
}

这是我处理流的方式：

public async Task UploadAsync(Stream stream)
{
     using (HttpContent fileStreamContent = new StreamContent(stream))
     {
         //Add any headers you require here
         fileStreamContent.Headers.Add("x-ms-blob-type", "BlockBlob");
         var response = await _httpClient.PutAsync("your upload endpoint url", fileStreamContent);
      }
}

【讨论】：