c# - 使用 .Net6 显示来自 Azure Blob 的图像数组

Question

我是一名初级前端开发人员，我有一个任务，我必须使用 Azure Blobs Container 让我们将其称为“缩略图”，循环遍历并使用 .Net 6.

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

做了一个小例子，以防不清楚我想要实现什么:

Image

我的问题是:

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

Answer 1

在 MVC 中

Controller :

  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:添加您可以在 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