在 AngularJs 读取 BLOB 文件

Question

我真的迷失在这种情况下，所以我接受任何建议。

一些事实：

需要做的事情：下载和上传文件，如果是 JPG 文件，客户端必须能够在浏览器上显示它。

这个 BLOB 文件可以是任何格式，据我所知，JPG、DOC、PDF...

我的数据库中存储了那些现有的 blob 文件，我必须在我的网站上阅读它，即 AngularJs App.

我的服务器端是 Api 和 Entity Framework。

到目前为止，我已经实现了将一个字节[]发送到Angular App。但是它显示为一堆奇怪的字符，例如�。而在这里，我已经迷路了。

在我的 C# class 上，我说将接收 BLOB 文件的 var 是一个 byte[]。这甚至是正确的吗？

我认为我有编码问题，因为我无法在 HTML 上阅读它。有人告诉我数据库是 UTF-16 格式的。我相信 Angular 在 UTF-8 上等待它（我如何确认或配置它？）。但是我从来没有遇到过任何其他数据的编码问题，当然，它们不是 BLOB 文件。

我的 C# 代码到 return BLOB 数据：

[HttpGet]
    [Route("Download/{documentId}")]
    public HttpResponseMessage Documents(int documentId)
    {
        var document = _unit.Document.Get(documentId);



        var response = new HttpResponseMessage(HttpStatusCode.OK);
        response.Content = new ByteArrayContent(document.BlobFile);
        response.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment");
        response.Content.Headers.ContentDisposition.FileName = document.Name;

        return response;
    }

我的Angular代码，接收数据：

$scope.download = function (documentId) {
            $http.get('Api/Documents/Download/' + documentId)
                .then(function (response) {
                    console.log(response);
                    $scope.test = response.data
                })
        }

在HTML，我正在尝试这样阅读它，假设它是一个图像（不知道它是否是正确的方式），我需要阅读它的唯一情况浏览器，对于其他浏览器，我只需要让它可以下载（我还不知道怎么做，但一次有一个问题）：

<img ng-src="data:image/jpeg;base64,{{teste}}" id="photo-id" />

正如我之前所说，我真的迷路了，正在接受建议，到目前为止我找不到任何可以帮助我的例子。

提前致谢！

Answer 1

C#代码：

[HttpPost]
public string GetCalculatorResults()
{

    byte[] imgArr = GetImageFromDataBase();

    // Here we are converting the byte array to Base64String
    return Convert.ToBase64String(imgArr)
}

HTML和AngularJS源代码应该是

<div ng-app="myApp" ng-controller="myCtrl">

    <img ng-src="data:image/jpeg;base64,{{ imageSrc  }}" />

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
    $scope.imageSrc = "";
    $http.get("someurl")
    .then(function(response) {
        $scope.imageSrc = response.data;
    });
});
</script>

我测试了上面的代码，它的工作。

在 AngularJs 读取 BLOB 文件

Reading BLOB file on AngularJs

.net

c#

blob

asp.net-web-api

angularjs