将文件从 Blazor WebAssembly App 直接上传到 Blob 存储

Question

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

不管是不是好习惯；是否可以从 blazor 应用程序直接上传到 blob 存储？我尝试的一种方法是通过 SAS 令牌。它通过控制台应用程序而不是 BLAZOR 应用程序工作。

<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;
        }

    }
}

就像我提到的那样，这将通过控制台应用程序工作，但由于 CORS 而不能通过 blazor 应用程序工作..这是一个无法绕过的安全功能，只能通过服务器端通过一个功能来完成 - > 斑点？

Answer 1

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

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

根据你的语境，只有几个像 PUT 这样的动词就足够了。

SAS key的配置也可以再具体一点

从 Blazor WASM 使用 SAS

即使不完全是你问题的一部分，但也值得一提。如果你想允许直接上传到你的 blob 存储 - 并且有充分的理由 - 在上传文件之前，你的 WASM 应用程序应该向你的 API 发送请求，响应包含只能用于这一操作。 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做个测试

将文件从 Blazor WebAssembly App 直接上传到 Blob 存储

Uploading file from Blazor WebAssembly App directly to Blob storage

file-upload

azure-blob-storage

blazor

shared-access-signatures