MVC中如何将Azure Files图片列表绑定模型，无下载展示缩略图

嗨，我来帮你搞定这个需求！你已经成功获取到Azure Files里的文件列表了，接下来只需要为每个PNG文件生成可直接访问的URL，就能把它们绑定到模型，在视图里展示缩略图，完全不用把文件下载到项目里。下面是具体的实现步骤：

1. 创建视图模型 #

首先定义一个简单的视图模型，用来存储图片的文件名和可访问URL：

public class ImageViewModel
{
    public string FileName { get; set; }
    public string ImageUrl { get; set; }
}

2. 生成可访问的图片URL #

Azure Files的文件默认是私有访问的，所以我们需要通过SAS令牌来生成临时的可访问链接（这是最安全的方式），或者如果你的共享设置了公共访问权限，也可以直接用文件的URI。

方案一：使用SAS令牌（推荐） #

修改你原来的代码，遍历文件列表时为每个PNG文件生成SAS令牌并拼接完整URL：

CloudStorageAccount storageAccount = CloudStorageAccount.Parse(CloudConfigurationManager.GetSetting("StorageConnectionString"));
CloudFileClient fileClient = storageAccount.CreateCloudFileClient();
CloudFileShare share = fileClient.GetShareReference(ConfigurationManager.AppSettings["ShareReference"]);

var imageModels = new List<ImageViewModel>();

if (share.Exists()) {
    CloudFileDirectory rootDir = share.GetRootDirectoryReference();
    CloudFileDirectory sampleDir = rootDir.GetDirectoryReference("freedom/" + DocName);
    if (sampleDir.Exists()) {
        IEnumerable<IListFileItem> fileList = sampleDir.ListFilesAndDirectories();
        
        foreach (var item in fileList)
        {
            // 筛选PNG文件
            if (item is CloudFile file && file.Name.EndsWith(".png", StringComparison.OrdinalIgnoreCase))
            {
                // 生成SAS令牌，设置读取权限和过期时间
                var sasPolicy = new SharedAccessFilePolicy
                {
                    Permissions = SharedAccessFilePermissions.Read,
                    SharedAccessExpiryTime = DateTime.UtcNow.AddHours(24) // 可根据需求调整有效期
                };
                string sasToken = file.GetSharedAccessSignature(sasPolicy);
                
                // 拼接完整的可访问URL
                string imageUrl = $"{file.Uri.AbsoluteUri}{sasToken}";
                
                // 添加到视图模型列表
                imageModels.Add(new ImageViewModel
                {
                    FileName = file.Name,
                    ImageUrl = imageUrl
                });
            }
        }
    }
}

// 将模型传递给视图
return View(imageModels);

方案二：公共访问（仅测试/非敏感场景使用） #

如果你已经把Azure Files共享设置为公共读取权限，可以直接使用文件的URI：

// 遍历文件时的代码替换为：
if (item is CloudFile file && file.Name.EndsWith(".png", StringComparison.OrdinalIgnoreCase))
{
    string imageUrl = file.Uri.AbsoluteUri;
    imageModels.Add(new ImageViewModel
    {
        FileName = file.Name,
        ImageUrl = imageUrl
    });
}

3. 在视图中展示缩略图 #

在Razor视图里，直接绑定模型并渲染图片：

@model IEnumerable<ImageViewModel>

<h2>PNG图片缩略图列表</h2>
<div style="display: flex; flex-wrap: wrap; gap: 1rem;">
    @foreach (var image in Model)
    {
        <div style="width: 150px;">
            <img src="@image.ImageUrl" alt="@image.FileName" style="width: 100%; height: auto; border-radius: 4px;" />
            <p style="text-align: center; margin-top: 0.5rem;">@image.FileName</p>
        </div>
    }
</div>

额外注意事项 #

• 安全提示：SAS令牌的有效期不要设置太长，权限仅授予Read即可，避免泄露敏感权限。
• 包版本：如果是ASP.NET Core项目，建议迁移到最新的Azure.Storage.Files.Shares NuGet包，旧的WindowsAzure.Storage包已经不再维护，新包的API逻辑类似，但命名空间有所变化。
• 权限验证：确保你的应用服务有足够的权限生成SAS令牌，比如使用存储账户的连接字符串（包含账户密钥），或者通过Azure AD身份验证来访问Azure Files。

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