Azure Blob 存储 - 显示上传的图像时出错

Question

我尝试了很多不同的方法并阅读了很多关于 SO 的答案，但在遇到困难时寻求帮助。

我在 azure 上有一个存储帐户和容器，我正在那里成功上传图像，但由于某种原因，它们似乎已损坏。

如果我直接从容器中下载它们，我无法通过 img 标签访问任何图像，也无法查看它们（在 Windows 照片中）。

我相信我的配置是正确的，公共访问级别 blob（我也尝试过公共访问级别 container）。

容器访问级别

已上传 Blob 的视图

图片未通过我的剃须刀页面上的网址显示

html img 标签

如果我下载并在 Windows 中打开，我也无法查看它

从容器下载的 img

我在下面尝试过的 2 个文件流方法示例

    //approach 1   
     
    
        using (FileStream fileStream = new FileStream(filePath, FileMode.Open))
                    {
                        BlobClient blobClient = container.GetBlobClient(fileName);
                        await blobClient.UploadAsync(fileStream, new BlobHttpHeaders { ContentType = "image/jpg" });
                    }
    
    //approach 2
    
            using (FileStream fileStream = new FileStream(filePath, FileMode.Open))
            {
                container.UploadBlob(attachment.FileName, fileStream);
            }
    
//service
    public async Task<bool> UploadSample(IFormFile attachment)
            {
                var configSection = Configuration.GetSection("AzureBlobStorge");
                var connectionString = configSection.GetSection("ConnectionString").Value;
                var containerName = configSection.GetSection("ContainerName").Value;
    
                string fileName = Path.GetFileName(attachment.FileName);
                string filePath = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot\\images\\profiles", fileName);
    
                BlobContainerClient container = new BlobContainerClient(connectionString, containerName);
    
                container.SetAccessPolicy(PublicAccessType.BlobContainer);
    
                using (FileStream fileStream = new FileStream(filePath, FileMode.Open))
                {
                    container.UploadBlob(attachment.FileName, fileStream);
    
                    //BlobClient blobClient = container.GetBlobClient(fileName);
                    //await blobClient.UploadAsync(fileStream, new BlobHttpHeaders { ContentType = "image/jpg" });
                }
                return true;
            }

//controller
        [HttpPost]
        [ActionName("ProfilePicsAsync")]
        [ValidateAntiForgeryToken]
        public async Task<ActionResult> ProfilePicsAsync(Members item)
        {
            try
            {
                IFormFile formFile = HttpContext.Request.Form.Files[0];
                var member = await _cosmosDbService.GetItemAsync(formFile.Name); //Id passed in the formfile object under name
                if (ModelState.IsValid)
                {
                    if (IsAdminUser())
                    {
                        if (formFile != null)
                        {
                            await _blobStorageService.UploadSample(formFile);
                        }
                        return RedirectToAction("Index");
                    }
                    return BadRequest("Not Authorised");
                }
            }
            catch (Exception ex)
            {
                if(ex is BusinessRuleException)
                {
                    return BadRequest(new BusinessRuleException(ex.Message));
                }
            }

//view
<form asp-action="ProfilePicsAsync" asp-controller="Home" method="post" enctype="multipart/form-data">
    @Html.HiddenFor(m => m.Id)
    <p>INPUT</p>
    <input asp-for="Attachment" Name="@Model.Id" />
    <button type="submit" id="btnUpload" class="btn btn-primary">Upload</button>
</form>

Answer 1

正如 cmets 中所述，问题确实出在您的上传代码上。基本上你正在上传一个零字节文件。这是因为下面的代码行：

using (FileStream fileStream = new FileStream(filePath, FileMode.Create))

当您使用FileMode.Create 时，如果文件存在，它将被覆盖。来自文档here：

指定操作系统应该创建一个新文件。 如果 文件已经存在，它将被覆盖。这需要写 允许。 FileMode.Create 相当于请求如果 文件不存在，使用 CreateNew；否则，使用截断。如果 文件已经存在但是是一个隐藏文件，一个 抛出 UnauthorizedAccessException 异常。

所以本质上你是用一个零字节文件覆盖你想要上传的文件，然后上传那个零字节文件。

要解决这个问题，请将上面的代码行更改为：

using (FileStream fileStream = new FileStream(filePath, FileMode.Open))

之后，您的上传和下载都应该可以正常工作了。

Answer 2

教程：https://docs.microsoft.com/en-us/azure/storage/blobs/storage-upload-process-images?tabs=dotnet%2Cazure-powershell

回购：https://github.com/Azure-Samples/storage-blob-upload-from-webapp

本教程中的图像控制器基本上为我提供了一个可行的解决方案，我扔掉了大部分代码并重新开始。

这是重要的一点

if (StorageHelper.IsImage(formFile))
{
    if (formFile.Length > 0)
    {
        using (Stream stream = formFile.OpenReadStream())
        {
            isUploaded = await StorageHelper.UploadFileToStorage(stream, formFile.FileName, storageConfig);
        }
    }
}