使用 .Net6 显示来自 Azure Blob 的图像数组答案

【问题标题】：Display an array of images from Azure Blobs with .Net6使用 .Net6 显示来自 Azure Blob 的图像数组
【发布时间】：2022-09-24 08:46:34
【问题描述】：

我是一名初级前端开发人员，我有一个任务，我必须接受 Azure Blobs Container 让我们称之为 \"thumbnails\" ，循环并使用 .Net 6 在屏幕上显示它。

基本上，我必须在 Dotnet 6 中创建一个图像库，使用 DotNet6 从 Blob 容器中获取图像，将其添加到视图 (MVC) 并使用 AngularJS 列出它，但我的许多尝试都失败了。

如果不清楚我想要实现的目标，请举一个小例子：

Image

我的问题是：

如何使用.net 6 从 Azure 存储中获取数据？
如何从中创建一个数组并将其传递给View？

你得到什么错误（或者结果没有正确显示）？

标签： c# azure azure-blob-storage blob .net-6.0

【解决方案1】：

你需要使用金块Azure.Storage.Blob.这个包公开了许多你可以使用的方法。

IAsyncEnumerable<BlobItem> blobs = blobContainer.GetBlobsAsync(prefix: "");
await foreach (BlobItem blobItem in blobs)
{
    ...
}

导入using System.Linq.Async 以使其正常工作。

查看官方文档以查看有关构建 blobContainer 的更多详细信息。

您可以从 blob 中提取 base64 string 值并将其直接绑定到 UI 中。

【讨论】：

【解决方案2】：

在 MVC 中

控制器：

  using System.Configuration;
    using System.IO;
    using System.Threading.Tasks;
    using System.Web;
    using Azure.Storage.Blobs;
    using Azure.Storage.Blobs.Models;
    using Microsoft.AspNetCore.Mvc;

    public class HomeController : Controller
    {
        const string blobContainerName = "tnail";
        static BlobContainerClient blobContainer;

        private IConfiguration _configuration;

        public HomeController(IConfiguration configuration)
        {
            _configuration = configuration;
        }
        public async Task<ActionResult> Index()
        {
            try
            {
                var s = _configuration.GetConnectionString("AConnectionString");

                BlobServiceClient blobServiceClient = new BlobServiceClient(s);

                blobContainer = blobServiceClient.GetBlobContainerClient(blobContainerName);
                await blobContainer.CreateIfNotExistsAsync(PublicAccessType.Blob);

                List<Uri> allBlobs = new List<Uri>();
                foreach (BlobItem blob in blobContainer.GetBlobs())
                {
                    if (blob.Properties.BlobType == BlobType.Block)
                        allBlobs.Add(blobContainer.GetBlobClient(blob.Name).Uri);
                }

                return View(allBlobs);
            }
            catch (Exception ex)
            {
                ViewData["message"] = ex.Message;
                ViewData["trace"] = ex.StackTrace;
                return View("Error");
            }
        }

模型：

namespace AzureBlobLearning.Models
{
    public class ErrorViewModel
    {
        public string? RequestId { get; set; }

        public bool ShowRequestId => !string.IsNullOrEmpty(RequestId);
    }
}

appsetting.json：添加 Connectionstring 数据，你可以在 Azure 门户中找到它，名称为 AConnectionString

看法：

@if (Model != null && Model.Count > 0)
{
    foreach (var item in Model)
    {
        <div class="imageBlock">
            <a href="@item" target="_blank"><img class="thumb" src="@item" alt="images"/></a><br />
            <div class="deleteDiv"><img class="deleteIcon" src="~/Images/deleteImage.png" title="Delete Image" onclick="deleteImage('@item');" /></div>
        </div>
    }
}

查看示例：https://github.com/Azure-Samples/storage-blobs-dotnet-webapp

【讨论】：