[英]How do I upload an image to a specific directory in my Azure blob storage from my ASP.NET Core application?
[英]How to I display an image from my Azure Blob Storage Account in my ASP.NET Core Application?
我环顾四周,虽然我可以看到许多有关如何上传到 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>
以下是该 Create 视图的相应方法。 正如您将看到的,我打开依赖项注入,然后在方法中使用它。 这仅用于上传 blob,并且一切正常,这是为了提供我的问题的完整上下文。
汽车控制器.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
标签中或下载它以供显示? 我让自己有点卡住了,不确定。 虽然目录结构工作正常并且它找到了文件......我不知道如何利用它。
很快: CloudBlockBlob
具有属性Uri
和StorageUri
。 第一个直接指向文件,第二个允许选择主要或次要网址。
如果允许匿名读取您的 blob(在 Azure 门户上配置),应该不会有任何问题
通常,您根本不返回 URL,而是返回一大块字节,内容类型表示“图像/jpeg”(或类似内容),这就是放入浏览器的内容。 您的img src
属性只需要引用返回这些字节的控制器操作。
例如,一个返回文件的控制器方法,不使用内置于 kestrel 的静态文件服务:
[ResponseCache(Duration = 1200, Location = ResponseCacheLocation.Client)]
public IActionResult GetImage(int id)
{
// determine file path from id and then
return PhysicalFile(path, "image/jpeg");
}
现在你不能返回 PhysicalFile,但它只从磁盘读取字节并返回它们 - 对于任何文件都是一样的,只需更改内容类型。 尝试一个 FileResult,复制返回的数据:
return File(bytes, "image/jpeg", fileName);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.