如何在我的ASP.NET Core应用程序中显示来自我的Azure Blob存储帐户的图像？

Question

我环顾四周，虽然我可以看到许多有关如何上传到Azure Blob存储的指南，但是一旦完成，它们似乎都无法检索您的数据。在我的方案中，我有一个应用程序，用户可以在创建应用程序时将其上传到汽车上，还为我的Blob存储创建了一项服务，该服务可用于依赖项注入。

[当用户尝试编辑汽车时，我希望他们看到详细信息和相关图像。我正在努力返回的是该图像，我想我几乎在那儿，但不确定如何返回我的信息。

这是我的代码，以提交表单开头。

创建

@model Car
<div class="row">
    <div class="col">
        <form asp-action="Create" asp-controller="Car" method="post" enctype="multipart/form-data">
            <div class="row">
                <div class="col">
                    <div class="md-form form-group">
                        <label asp-for="Name"></label>
                        <input type="text" class="form-control" asp-for="Name" />
                    </div>
                    <div class="md-form form-group">
                        <label asp-for="ImageFile" class="active">Image</label>
                        <!-- Image Upload-->
                        <kendo-upload name="ImageFile" show-file-list="true">
                        </kendo-upload>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <hr />
                    <button type="submit" class="btn btn-success">Submit</button>
                    <button type="reset" class="btn btn-amber">Reset</button>
                </div>
            </div>
        </form>
    </div>
</div>

以下是该“创建”视图的相应方法。如您所见，我首先打开依赖项注入，然后在方法中利用它。这仅用于上传Blob，并且一切正常，这是为了提供我问题的完整信息。

CarController.cs

private readonly ICarService _carService;
private readonly IWebHostEnvironment _env;
private readonly IConfiguration _configuration;

public CarController(
    IWebHostEnvironment env,
    ICarService carService,
    IConfiguration configuration)

    _carService = carService;
    _env = env;
    _configuration = configuration;

[HttpPost]
[ValidateAntiForgeryToken]
public IActionResult Create(Car car)

    if (ModelState.IsValid)
    
        //
        //Create Car First
        _carService.InsertCar(car);

        //
        //Get the id if the car just created            
        int id = car.Id;

        //
        //If file data is there, prepare and upload to
        //blob storage.
        if (car.ImageFile != null)
        
            string category = "car";
            var fileName = "car-image.jpg";
            byte[] fileData = new byte[car.ImageFile.Length];
            string mimeType = car.ImageFile.ContentType;                   

            BlobStorageService objBlobService = new BlobStorageService(_configuration.GetConnectionString("AzureStorage"));

                car.ImagePath = objBlobService.UploadFileToBlob(
                    category, 
                    id, 
                    fileName, 
                    fileData, 
                    mimeType);
                            
            return RedirectToAction(nameof(Index));
        
        return View(car);

下一部分是我正在努力的地方。我需要在编辑页面上显示上传的图像。这是我开始编写的用于执行此操作的方法，该方法尚不完善，从现在开始我需要帮助。

编辑

[HttpGet]
public IActionResult Edit(int id)

    //
    //Access the service and pass the car ID to it
    BlobStorageService objBlob = new BlobStorageService(_configuration.GetConnectionString("AzureStorage"));
        objBlob.GetBlobData(id.ToString());

    //
    //Get car data from the repository
    var data = _carService.GetCar(id);
    return View(data);

这是我的Blob存储服务，可处理大部分此类操作。如您所见，当从编辑页面传递ID时，它用于在Azure上形成目录结构以查找相对映像。我正在返回属性，但这不对。

using Microsoft.WindowsAzure.Storage;
using Microsoft.WindowsAzure.Storage.Blob;
using System;
using System.IO;
using System.Threading.Tasks;
using Microsoft.Extensions.Configuration;

namespace MyProject.Services

    public class BlobStorageService
    
        string accessKey = string.Empty;        

        public BlobStorageService(string endPoint)
        
            accessKey = endPoint;
        

        public string UploadFileToBlob(string category, int id, string strFileName, byte[] fileData, string fileMimeType)
        
            try
            
                var _task = Task.Run(() => this.UploadFileToBlobAsync(category, id, strFileName, fileData, fileMimeType));
                _task.Wait();
                string fileUrl = _task.Result;
                return fileUrl;
            
            catch (Exception)
            
                throw;
            
        

        public async void GetBlobData(string id)
         
            CloudStorageAccount cloudStorageAccount = CloudStorageAccount.Parse(accessKey);
            CloudBlobClient cloudBlobClient = cloudStorageAccount.CreateCloudBlobClient();

            string strContainerName = "uploads";
            CloudBlobContainer cloudBlobContainer = cloudBlobClient.GetContainerReference(strContainerName);

            string pathPrefix = "car/" + id;
            CloudBlobDirectory blobDirectory = cloudBlobContainer.GetDirectoryReference(pathPrefix);

            // get block blob reference  
            CloudBlockBlob blockBlob = blobDirectory.GetBlockBlobReference("car-image.jpg");

            await blockBlob.FetchAttributesAsync();
                  

        private async Task<string> UploadFileToBlobAsync(string category, int id, string strFileName, byte[] fileData, string fileMimeType)
        
            try
            
                string strContainerName = "uploads";
                string fileName = category + "/" + id + "/" + strFileName;

                CloudStorageAccount cloudStorageAccount = CloudStorageAccount.Parse(accessKey);
                CloudBlobClient cloudBlobClient = cloudStorageAccount.CreateCloudBlobClient();                
                CloudBlobContainer cloudBlobContainer = cloudBlobClient.GetContainerReference(strContainerName);                

                if (await cloudBlobContainer.CreateIfNotExistsAsync().ConfigureAwait(false))
                
                    await cloudBlobContainer.SetPermissionsAsync(new BlobContainerPermissions  PublicAccess = BlobContainerPublicAccessType.Blob ).ConfigureAwait(false);
                

                if (fileName != null && fileData != null)
                
                    CloudBlockBlob cloudBlockBlob = cloudBlobContainer.GetBlockBlobReference(fileName);
                    cloudBlockBlob.Properties.ContentType = fileMimeType;
                    await cloudBlockBlob.UploadFromByteArrayAsync(fileData, 0, fileData.Length).ConfigureAwait(false);
                    return cloudBlockBlob.Uri.AbsoluteUri;
                
                return "";
            
            catch (Exception ex)
            
                throw (ex);

所以，问题是，如何返回图像的URL，以便可以将其放置在img src标记中或下载以进行显示？我有点卡住了，不确定。虽然目录结构可以正常工作，并且可以找到文件...我不知道如何利用它。

Answer 1

另一答案