angular - 如何从 Angular 服务接收来自 ASP.NET Core Web API 的文件并在不同的 chrome 选项卡中显示

Question

我有一个用 .NET Core 编写的 Web API，它返回一个文件，如下所示：

[Authorize]
[HttpGet("{id}")]
public async Task<IActionResult> GetFile(int id)
{
    var response = await _fileService.GetFile(id);

    Response.Clear();

    return File(response.FileByteArray, response.FileType, response.FileName);
}

public async Task<FileResponseDTO> GetFile(int fileId)
{
    using (var unitOfWork = _unitOfWorkFactory.CreateUnitOfWork())
    {
        var response = new FileResponseDTO();
        var file = await unitOfWork.FileRepository.GetFile(fileId);

        if (file != null)
        {
            string filePath = GetFilePath(file.FileName);

            response.FileByteArray = System.IO.File.ReadAllBytes(filePath);
            response.FileName = file.FileName;
            response.FileType = file.FileType; ;
        }

        return response;
    }
}

它返回一个文件，如下所示：

现在我想在服务中使用具有以下功能的 Angular 来使用该服务：

getFile(id: number): Observable<File> {
    return this.http.get<File>(
        this.uri + `/file/${id}`
    );
}

有人可以帮助如何使用这个 api 以及如何在 Chrome 中显示图像/文件吗？

谢谢。

标签： angularfile-upload.net-core

Answer 1

您正在返回一个文件，该文件将适用于下载文件。不要返回文件，而是将文件保存在项目中的位置并将路径返回到 angular。然后显示图像 src 的路径。