如何用.NET6读取Azure Blob容器图片并传递至MVC视图？

1. .NET6读取Azure Blob Storage数据 #

首先在项目中安装Azure Blob存储SDK，执行以下命令：

dotnet add package Azure.Storage.Blobs

在appsettings.json中配置Azure存储连接字符串：

{
  "ConnectionStrings": {
    "AzureStorage": "你的Azure存储连接字符串"
  }
}

通过依赖注入实现Blob读取逻辑，示例控制器代码如下：

using Azure.Storage.Blobs;
using Azure.Storage.Blobs.Models;

public class GalleryController : Controller
{
    private readonly BlobServiceClient _blobServiceClient;

    public GalleryController(BlobServiceClient blobServiceClient)
    {
        _blobServiceClient = blobServiceClient;
    }

    public async Task<IActionResult> Index()
    {
        // 获取目标容器
        var containerClient = _blobServiceClient.GetBlobContainerClient("thumbnails");
        await containerClient.CreateIfNotExistsAsync(PublicAccessType.Blob);

        // 遍历容器内Blob并收集信息
        var blobList = new List<BlobImage>();
        await foreach (BlobItem blob in containerClient.GetBlobsAsync())
        {
            var blobClient = containerClient.GetBlobClient(blob.Name);
            blobList.Add(new BlobImage
            {
                Name = blob.Name,
                Url = blobClient.Uri.AbsoluteUri
            });
        }

        return View(blobList);
    }
}

// 定义存储Blob信息的模型类
public class BlobImage
{
    public string Name { get; set; }
    public string Url { get; set; }
}

如果容器是私有访问权限，需要生成SAS令牌获取Blob访问链接，替换上述代码中URL生成部分：

var sasBuilder = new BlobSasBuilder(BlobContainerPermissions.Read, DateTimeOffset.UtcNow.AddHours(1))
{
    BlobContainerName = containerClient.Name,
    BlobName = blob.Name
};

var credential = new StorageSharedKeyCredential(containerClient.AccountName, "你的存储账户密钥");
var sasToken = sasBuilder.ToSasQueryParameters(credential).ToString();
var blobUrl = $"{blobClient.Uri.AbsoluteUri}?{sasToken}";

2. 将数据传递到MVC视图并通过AngularJS展示 #

传递数据到视图 #

上述控制器中已通过return View(blobList);将Blob数组作为强类型模型传递到视图，视图顶部声明模型类型：

@model List<BlobImage>

也可通过ViewBag传递数据：

ViewBag.BlobImages = blobList;
return View();

用AngularJS展示图片画廊 #

在视图中引入AngularJS库（可下载本地文件或使用官方资源），然后编写Angular逻辑绑定数据：

@{
    ViewData["Title"] = "图片画廊";
}

<script src="angular.min.js"></script>

<div ng-app="galleryApp" ng-controller="galleryCtrl">
    <div class="gallery-item" ng-repeat="img in blobImages">
        <img ng-src="{{img.Url}}" alt="{{img.Name}}" />
        <p>{{img.Name}}</p>
    </div>
</div>

<script>
    var app = angular.module('galleryApp', []);
    app.controller('galleryCtrl', function($scope) {
        // 将.NET传递的模型转为Angular可用的数组
        @if (Model != null)
        {
            <text>
            $scope.blobImages = @Html.Raw(Json.Serialize(Model));
            </text>
        }
        // 若使用ViewBag则替换为：
        // $scope.blobImages = @Html.Raw(Json.Serialize(ViewBag.BlobImages));
    });
</script>

<style>
    .gallery-item {
        display: inline-block;
        margin: 10px;
        text-align: center;
    }
    .gallery-item img {
        width: 200px;
        height: 150px;
        object-fit: cover;
        border-radius: 4px;
        border: 1px solid #eee;
    }
</style>

内容的提问来源于stack exchange，提问作者AchilleScript