Skip to main content
 首页 » 编程设计

c#之在 AngularJs 上读取 BLOB 文件

2024年04月17日36shangdawei

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

一些事实:

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

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

我将那些现有的 blob 文件存储在我的数据库中,我必须在我的网站(即 AngularJs 应用程序)上阅读它。

我的服务器端是一个带有 Entity Framework 的 Web Api。

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

在我的 C# 类(class)中,我说过将接收 BLOB 文件的 var 是一个 byte[]。这甚至是正确的吗?

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

我的 C# 代码返回 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" /> 

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

提前致谢!

请您参考如下方法:

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>  

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