BLOB-Datei auf AngularJs lesen

Question

Ich bin wirklich in dieser Situation verloren, also akzeptiere ich irgendwelche Vorschläge.

Einige Fakten:

Was getan werden muss: von Dateien herunter- und hochladen, und im Fall einer JPG-Datei muss der Kunde in der Lage sein, es auf Browser zu visualisieren.

Diese BLOB-Datei kann alles sein, soweit ich weiß, JPG, DOC, PDF ...

Ich habe diese Dateien vorhandenen Blob in meiner DB gespeichert, und ich habe es auf meiner Website zu lesen, Das ist AngularJs App.

Meine Server-Seite ist eine Web API mit Entity Framework.

Bisher habe ich erreicht, ein Byte [] an Angular App zu senden. Aber es wird als eine Reihe von seltsamen Zeichen wie angezeigt. Und hier bin ich schon verloren.

Auf meiner C# -Klasse, sagte ich, die Var, die die BLOB-Datei erhalten wird, ist ein Byte []. Ist das überhaupt richtig?

Ich glaube, dass ich Probleme mit der Codierung habe, da ich es nicht in HTML lesen kann. Mir wurde gesagt, dass die DB auf UTF-16 ist. Ich glaube, dass Angular es auf UTF-8 wartet (wie kann ich das bestätigen oder konfigurieren?). Aber ich hatte nie dieses Kodierungsproblem mit anderen Daten, aber natürlich waren das keine BLOB-Dateien.

Meine C# -Code BLOB-Daten zurück:

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

Mein Angular-Code, die Daten recieving:

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

HTML, ich versuche es so zu lesen, vorausgesetzt, es ist ein Bild (weiß nicht, ob es der richtige Weg ist), der einzige Fall, dass ich es im Browser lesen muss, für jeden anderen muss ich es nur herunterladbar machen (was ich noch nicht weiß, aber eins Problem auf einmal):

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

Wie ich bereits sagte, bin ich wirklich verloren und akzeptiere Vorschläge, und ich konnte kein Beispiel finden, das mir bisher helfen könnte.

Vielen Dank im Voraus!

Answer 1

Der C# -Code:

[HttpPost] 
public string GetCalculatorResults() 
{ 

    byte[] imgArr = GetImageFromDataBase(); 

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

Die HTML und AngularJS Quellcode

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

sein sollte testete ich den obigen Code, seine Arbeiten.