在 abp 中检索图像源的简单方法

Question

我是 ABP 框架的新手，这个问题的答案可能非常简单，但我还没找到。图片是任何应用程序的重要组成部分，必须以最佳方式（大小、缓存）处理它们。

场景

设置文件系统 Blob 存储提供程序。这意味着上传文件将作为图像文件存储在文件系统中
制作一个使用 Blob 容器保存和检索图像的服务。因此，保存后，我使用唯一的文件名作为 blob 名称。此名称用于将其取回。
用户已登录，需要授权
我可以通过调用blobContainer.GetAllBytesOrNullAsync(blobName)

byte[]

我想直接在 <img> 或 datatable 行中轻松显示图像。

所以，这是我的问题：是否有一种简单的方法可以直接在剃刀页面中使用 blob 存储图像作为 <img> 的 src？我设法实现的是在模型中设置，源作为由 image type + bytes converted to base 64 string 制成的字符串（如但是在这种情况下我需要在模型中进行设置而且我也不需要知道浏览器是否使用缓存。我不知道缓存在这种情况下如何工作。

我知道这可能是一个与 asp.net 核心更相关的问题，但我在想也许在 abp 中可以通过 link 访问图像。

Answer 1

如果您有 blob 的 ID，那么就很容易做到。只需创建一个端点即可根据 blob id 获取图像。

这是 AppService 示例

public class DocumentAppService : FileUploadAppService
{
    private readonly IBlobContainer<DocumentContainer> _blobContainer;
    private readonly IRepository<Document, Guid> _repository;
    public DocumentAppService(IRepository<Document, Guid> repository, IBlobContainer<DocumentContainer> blobContainer)
    {
        _repository = repository;
        _blobContainer = blobContainer;
    }

    public async Task<List<DocumentDto>> Upload([FromForm] List<IFormFile> files)
    {
        var output = new List<DocumentDto>();
        foreach (var file in files)
        {
            using var memoryStream = new MemoryStream();
            await file.CopyToAsync(memoryStream).ConfigureAwait(false);
            var id = Guid.NewGuid();
            var newFile = new Document(id, file.Length, file.ContentType, CurrentTenant.Id);
            var created = await _repository.InsertAsync(newFile);
            await _blobContainer.SaveAsync(id.ToString(), memoryStream.ToArray()).ConfigureAwait(false);
            output.Add(ObjectMapper.Map<Document, DocumentDto>(newFile));
        }

        return output;
    }

    public async Task<FileResult> Get(Guid id)
    {
        var currentFile = _repository.FirstOrDefault(x => x.Id == id);
        if (currentFile != null)
        {
            var myfile = await _blobContainer.GetAllBytesOrNullAsync(id.ToString());
            return new FileContentResult(myfile, currentFile.MimeType);
        }

        throw new FileNotFoundException();
    }
}

上传函数将 upload 文件，Get 函数将获取文件。

现在将获取路径设置为图像的 src。

这是博客 post：https://blog.antosubash.com/posts/dotnet-file-upload-with-abp

回购：https://github.com/antosubash/FileUpload

在 abp 中检索图像源的简单方法

Easy way to retrieve image source in abp

asp.net-core

abp