在AngularJs上读取BLOB文件

本文关键字：BLOB 文件 读取 AngularJs | 更新日期: 2023-09-27 18:14:53

我对这种情况真的很困惑，所以我接受任何建议。

一些事实:

需要做的事情:下载和上传文件，如果是JPG文件，客户端必须能够在浏览器上可视化。

这个BLOB文件可以是任何东西，据我所知，JPG, DOC, PDF…

我有那些现有的blob文件存储在我的数据库中，我必须在我的网站上阅读它，这是AngularJs应用程序。

My Server-side是一个Web Api with Entity Framework.

到目前为止，我已经实现了向Angular App发送一个byte[]。但它显示为一堆奇怪的字符，比如?在这里，我已经迷路了。

在我的c#类中，我说将接收BLOB文件的变量是字节[]。这是正确的吗?

我相信我有编码问题，因为我不能在HTML上阅读它。我听说DB是UTF-16格式的。我相信Angular正在等待UTF-8(我如何确认或配置它?)但是我从来没有在任何其他数据上遇到过这种编码问题，但是当然，它们不是BLOB文件。

返回BLOB数据的c#代码:

[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" />

就像我之前说的，我真的很迷茫，接受建议，到目前为止我找不到任何可以帮助我的例子。

提前感谢!

在AngularJs上读取BLOB文件

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>

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

相关文章：