Question

我想实现一个简单的任务，即检索二进制图像，并在我的html中显示它

公共课艺术作品

{
    [Key]
    [DatabaseGenerated(DatabaseGeneratedOption.Identity)]
    public Guid artworkID { get; set; }
    public string artworkName { get; set; }
    public string artworkMimeType { get; set; }
    public byte[] artworkMeta { get; set; }
    public string artworkBase64String { get; set; }
}

从DB获取图稿

public Artwork GetArtwork(Guid id)
    {
        return _context.Artworks.SingleOrDefault(a => a.artworkID == id);
    }

API控制器

public IHttpActionResult Get(Guid id)
        {
            if (id == null)
            {
                return BadRequest();
            }
            var artwork = _repository.GetArtwork(id);
            if (artwork == null)
                return NotFound();
            else
                return Ok(artwork);
        }

我也使用过这种方法，它会返回我想要的数据，但我仍然不知道如何使用它来实现我的目标。

[HttpGet]
    public HttpResponseMessage Get(Guid id)
    {
        HttpResponseMessage result = null;
        try
        {
            var artwork = _repository.GetArtwork(id);

            if (artwork == null)
            {
                result = Request.CreateResponse(HttpStatusCode.Gone);
            }
            else
            {
                // sendo file to client
                byte[] bytes = artwork.artworkMeta ;


                result = Request.CreateResponse(HttpStatusCode.OK);
                result.Content = new ByteArrayContent(bytes);
                result.Content.Headers.ContentDisposition = new System.Net.Http.Headers.ContentDispositionHeaderValue("attachment");
                result.Content.Headers.ContentDisposition.FileName = artwork.artworkName;
            }

            return result;
        }
        catch (Exception ex)
        {
            return Request.CreateResponse(HttpStatusCode.Gone);
        }
    }

这是我的角度要求

$scope.getCity = function (id) {
            $http.get('/api/artwork/' + $RouteParams.id).success(function (response) {
                $scope.artwork= response;
                //I've seen dudes using Blob here, but I'm not sure how that works
            });
        }

我的问题是我的角度请求和我的HTML，如何在不执行此操作的情况下显示图稿：

<img ng-src="data:{{artwork.artworkartworkMimeType}};base64,{{artwork.artworkBase64String}}" class="img-responsive" />

这会显示图像，但我不喜欢它看起来多么笨拙，而且我也会使用音频文件，因此我需要一种干净且易于理解的方式。请帮忙！

Answer 1

正如你所说，这可以通过使用blob来完成。

第一步是在api方法中将内容类型设置为application/octet-stream

[HttpGet]
public HttpResponseMessage Get(Guid id)
{
    HttpResponseMessage result = null;
    try
    {
        var artwork = _repository.GetArtwork(id);
        if (artwork == null)
        {
            result = Request.CreateResponse(HttpStatusCode.Gone);
        }
        else
        {
            // sendo file to client
            byte[] bytes = artwork.artworkMeta ;
            result = Request.CreateResponse(HttpStatusCode.OK);
            result.Content = new ByteArrayContent(bytes);
            result.Content.Headers.ContentDisposition = new System.Net.Http.Headers.ContentDispositionHeaderValue("attachment");
            result.Content.Headers.ContentDisposition.FileName = artwork.artworkName;
            result.Content.Headers.ContentType = new MediaTypeHeaderValue("application/octet-stream");
        } 

        return result;
    }
    catch (Exception ex)
    {
        return Request.CreateResponse(HttpStatusCode.Gone);
    }
}

然后添加客户端请求，从响应中创建blob。然后为blob创建一个url，它将成为img

的源

$scope.fileURL = '';
$http({
    method: 'GET',
    url: '/api/artwork/' + $RouteParams.id,
    responseType: 'arraybuffer',
    headers: {
        'Access-Control-Allow-Origin': '*',
    }
}).success(function (data, status, headers) {
    headers = headers();
    var contentType = headers['content-type'];
    var blob = new Blob([data], { type: contentType });
    //Create a url to the blob 
    $scope.fileURL = window.URL.createObjectURL(blob);

}).error(function (message) {
    console.log(message);
});

然后将url绑定到ngSrc

<img ng-src="{{fileURL}}" class="img-responsive" />

Answer 2

您可以将图像存储为二进制格式，而无需将其编码为base64。然后从DB中检索图像会更简单。在你的asp控制器中：

FormLoad

在角度看来：

  [HttpGet]
  public FileResult GetPhoto(int id) {

      return File(_repository.GetArtwork(id).artworkMeta, "image/jpg");

  }

从DB返回图像并使用.NET API和AngularJS显示

2 个答案: