AngularJsでBLOBファイルを読む

Question

私はこの状況で本当に迷っていますので、私はどんなsugestionsでも受け入れています。

いくつかの事実：ダウンロードし、ファイルのアップロード、およびJPGファイルの場合には、クライアントはブラウザ上でそれを視覚化することができなければならない：何をすべきか

。

このBLOBファイルは、何もすることができ、私の知る限り、JPG、DOC、PDF ...

I私のDBに保存されているものの既存のBLOBファイルを持っている、と私は私のウェブサイト上でそれを読み込む必要があり、 AngularJsアプリです

My Server-sideは、Entity Frameworkを備えたWeb APIです。

これまでのところ、私はAngular Appにバイト[]を送ることを達成しました。しかし、それはsuchのような奇妙な文字の束として示されています。そして、ここで、私はすでに失われています。

私のC＃クラスでは、BLOBファイルを受け取るvarがバイト[]であると言いました。それは正しいですか？

私はHTMLで読むことができないので、エンコードの問題があると思います。 DBがUTF-16であると言われました。私はAngularがUTF-8でそれを待っていると信じています（これを確認したり設定したりするにはどうすればいいですか？）しかし、他のデータでこのエンコーディングの問題が発生したことはありませんでしたが、もちろんBLOBファイルではありませんでした。それがあると仮定すると、

HTMLで

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

が、私はこのようにそれを読んしようとしています。データが供給、

[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; 
    } 

マイ角度コード：

私のC＃コードは、BLOBデータを戻します画像が正しいかどうかわからない、ブラウザーで読む必要がある唯一のケース、それ以外のものはダウンロード可能にする必要がある（私はまだどのようにしているのかわからないが、問題は一度に）：

<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> 

であるべき私は、その作業を上記のコードをテストしました。