将文件从 Blazor WebAssembly 应用程序直接上传到 Blob 存储

Question

我一直在尝试开发 Blazor WebAssembly 应用程序（我正在尝试使用 .NET Standard 2.1 和 .NET 5.0），我的目标是允许用户使用 InputFileand 为该文件选择一个文件上传到 Azure Blob 存储容器。我一直在环顾四周，并在这里和那里遵循不同的指南，但没有成功。我遇到的问题通常与安全性有关，例如 CORS（尽管它已经完全设置）、授权失败和 System.PlatformNotSupportedException: System.Security.Cryptography.Algorithms 在此平台上不受支持。

不管这是否是好的做法；是否可以从 blazor 应用程序直接上传到 blob 存储？我尝试的一种方法是通过 SAS 令牌。它可以通过 CONSOLE APP 运行，但不能通过 BLAZOR APP 运行。

<label for="browseData"><b>Browse File</b></label>
<p><InputFile id="browseData" OnChange="@OnInputFileChange" /></p>

private async Task OnInputFileChange(InputFileChangeEventArgs e)
{
    var maxAllowedFiles = 1;

    var inputFile = e.GetMultipleFiles(maxAllowedFiles).First();

    var stream = inputFile.OpenReadStream();

    await StorageService.UploadFileToStorage(stream, "sftp-server", inputFile.Name);
}

存储服务

public class AzureStorageService

{
    private readonly IAzureStorageKeyService _azureStorageKeyService;

    public AzureStorageService(IAzureStorageKeyService azureStorageKeyService)
    {
        _azureStorageKeyService = azureStorageKeyService;
    }

    public async Task<Uri> UploadFileToStorage(Stream stream, string container, string fileName)
    {
        try
        {
            const string REPLACE_THIS_ACCOUNT = "test";

            var blobUri = new Uri("https://"
                                  + REPLACE_THIS_ACCOUNT +
                                  ".blob.core.windows.net/" +
                                  container + "/" + fileName);
            // Create the blob client.

            AzureSasCredential azureSasCredential = new AzureSasCredential(
                "?sv=2019-12-12&ss=bfqt&srt=sco&sp=rwdlacupx&se=2021-01-20T04:21:45Z&st=2021-01-19T20:21:45Z&spr=https&sig=OIkLePYDcF2AChtYUKs0VxUajs4KmwSyOXpQkFLvN2M%3D");

            var blobClient = new BlobClient(blobUri, azureSasCredential);

            // Upload the file
            var response = await blobClient.UploadAsync(stream, true);

            return blobUri;
        }
        catch (Exception ex)
        {
            Console.WriteLine(ex);
            return null;
        }

    }
}

就像我提到的那样，这将通过控制台应用程序而不是 Blazor 应用程序工作，因为 CORS..这是一个无法绕过的安全功能，只需要通过服务器端通过一个函数来完成 -> blob ?

Answer 1

我能够使用您的代码上传文件。它就像一种魅力。因此，您的源代码中没有错误。我使用Microsoft.NET.Sdk.BlazorWebAssembly SDK 和net5.0 作为目标框架。可能是存储帐户的配置问题。

CORS 策略允许应用程序的主机 (https://localhost:5001) 访问具有任何动词和任何标头 (*) 值的资源。响应可以包含 content-length 标头。您的 WASM 是自托管还是托管在 ASP 核心应用程序中？您可以通过检查请求轻松发现发送到 azure 的来源。

根据您的上下文，只有 PUT 这样的几个动词可能就足够了。

SAS密钥的配置也可以更具体。

使用 Blazor WASM 中的 SAS

甚至不完全是您问题的一部分，但值得一提。如果您想允许直接上传到您的 blob 存储中 - 并且有充分的理由 - 在上传文件之前，您的 WASM 应用程序应该向您的 API 发送请求，响应包含只能用于此的 SAS 密钥一次操作。 SAS 密钥本身应该是 user delegation SAS key

Answer 2

如果您想在 Blazor WebAssembly 应用程序中直接将文件上传到 Azure blob，我们需要为 Azure 存储帐户配置 CORS。配置方法请参考here。

例如

配置 CORS

Allowed origins: *
Allowed verbs: DELETE,GET,HEAD,MERGE,POST,OPTIONS,PUT
Allowed headers: *
Exposed headers: *
Maximum age (seconds): 3600

Create Account SAS。

我的上传文件组件

@page "/fileupload"
@using System.ComponentModel.DataAnnotations
@using System.IO
@using System.Linq
@using System.Threading
@using Azure.Storage.Blobs
@using Azure.Storage.Blobs.Models
@using Azure.Storage
@using Azure


<h3>File Upload Component</h3>
<label for="browseData"><b>Browse File</b></label>
<p><InputFile id="browseData" OnChange="@OnInputFileChange" /></p>
@{
    var progressCss = "progress " + (displayProgress ? "" : "d-none");
}

<div class="@progressCss">
    <div class="progress-bar" role="progressbar" style="@($"width: { progressBar }%")" aria-valuenow="@progressBar" aria-valuemin="0" aria-valuemax="100"></div>
</div>

@code {
    private bool displayProgress = false;
    private string result = string.Empty;
    private string progressBar;
    private int maxAllowedSize = 10 * 1024 * 1024;
    private async Task OnInputFileChange(InputFileChangeEventArgs e)
    {
        var maxAllowedFiles = 1;

        var inputFile = e.GetMultipleFiles(maxAllowedFiles).First();

        var blobUri = new Uri("https://"
                                  + "23storage23" +
                                  ".blob.core.windows.net/" +
                                  "upload" + "/" + inputFile.Name);


        AzureSasCredential credential = new AzureSasCredential("");
        BlobClient blobClient = new BlobClient(blobUri, credential, new BlobClientOptions());
        displayProgress = true;

        var res = await blobClient.UploadAsync(inputFile.OpenReadStream(maxAllowedSize), new BlobUploadOptions
        {
            HttpHeaders = new BlobHttpHeaders { ContentType = inputFile.ContentType },
            TransferOptions = new StorageTransferOptions
            {
                InitialTransferSize = 1024 * 1024,
                MaximumConcurrency = 10
            },
            ProgressHandler = new Progress<long>((progress) =>
            {
                progressBar = (100.0 * progress / inputFile.Size).ToString("0");

            })

        });





    }
}

另外，您也可以下载我的sample进行测试。