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

Question

我一直在尝试开发 Blazor WebAssembly 应用程序（我正在尝试使用 .NET Standard 2.1 和 .NET 5.0），我的目标是允许用户使用选择文件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 应用程序工作。这是一个无法绕过的安全功能，只能通过服务器端通过函数 -> blob 来完成吗？

Answer 1

如果要在 Blazor WebAssembly 应用程序中直接将文件上传到 Azure blob，我们需要为 Azure 存储帐户配置 CORS。关于如何配置，请参考这里。

例如

配置跨域资源共享

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

创建帐户 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");

            })

        });





    }
}

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