0

如何使用asp web api返回多个图像，然后设置angularjs来显示它们？我一直在寻找一点，但我没有得到任何工作。我真的被困在这里，所以任何帮助将不胜感激！

我当前的代码：列出图像；使用 (var uow = new UnitOfWork()) { images = uow.ImageMetadatas.Query(m => m.AlbumId == albumId).Select(m => m.Filename).ToList(); }

        var content = new MultipartContent();
        foreach (var img in images)
        {
            var image = new Bitmap(img);
            var thumbnail = image.GetThumbnailImage(200, 200, ThumbnailCallback, IntPtr.Zero);
            var stream = new MemoryStream();
            thumbnail.Save(stream, ImageFormat.Jpeg);

            var imgContent = new StreamContent(stream);
            imgContent.Headers.ContentType = MediaTypeHeaderValue.Parse("image/jpeg");
            content.Add(imgContent);
        }
        return new HttpResponseMessage(HttpStatusCode.Accepted) { Content = content };
4

1 回答 1

1

看看这里，看看它是否有帮助： Book Store application using AngularJS and Asp.Net Web Api

谢谢

编辑：

说明：下面的代码是处理已经保存在服务器上的图像文件。

首先，您必须从 angularJS 调用 web api。最简单的方法是使用 Angular 控制器中的 $http，但我建议为这种情况创建一个数据服务，并将该服务注入到所有需要访问该数据的控制器中。

将此代码直接使用到您的控制器中：

$scope.myData = [];
$http({
        method: 'GET',
        url: 'api/controller/'
    }).
    success(function (data, status, headers, config) {
        $scope.myData = data;
    }).
    error(function (data, status) {
        console.log("Request Failed");
    });

或创建一个服务并将其注入控制器：

var myApp = angular.module('myApp', []);
myApp.factory("DataService", function ($http, $q) {
  var myData = []; 
  var read = function () {
    var deferred = $q.defer();
    deferred.resolve($http({
      method: 'GET',
      url: 'api/controller/'
    }));
    return deferred.promise;
  };
  return {
    MyData: myData,
    ReadData: read
  };
});
myApp.controller('MainCtrl', function ($scope, DataService) {    
  $scope.myData= [];        
  DataService.ReadData().
   then(function (config, data, headers, status) { $scope.myData = arguments[0].data; });
});

然后在服务器端，创建一个“GET”方法来返回一个带有图像数据的可枚举对象：

public List<myData> GetData()
{            
  List<myData> returnData = GetImagesData();    
  return returnData;
}

这里的“myData”类是数据模型。

希望能帮助到你。

于 2013-09-27T18:40:18.077 回答