37

AngularJS には、$http.getデータを動的にフェッチする機能があります。残念ながら、公式ドキュメントからは、バイナリデータの読み取り方法を理解するのは簡単ではありません (たとえば、画像操作の場合)。

デフォルトgetでは、データを としてフェッチしますString( a plunker で参照してください)。これは非常に面倒です。では、 ArrayBufferでそれを取得する方法は? (XHR2以降、これはすでに可能であることに注意してください。)

<!DOCTYPE html>
<html>
  <head>
    <title>Using $http.get to read binary data</title>
  </head>
  <body ng-app>
    <h1>$http to load binary data</h1>
    <div ng-controller="FetchCtrl" >
      <button ng-click="fetch()">fetch</button><br/>
      {{info}}
    </div>
    <script src="http://code.angularjs.org/1.0.6/angular.min.js"></script>
    <script>
    // Controller
    function FetchCtrl($scope, $http) {
      // See note 1
      $scope.URL = "http://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png";
      $scope.info = "Click 'fetch' to fetch an image" ;

      $scope.fetch = function() {
        delete $http.defaults.headers.common['X-Requested-With']; // See note 2
        $http.get($scope.URL).
          success(function(data) {
            $scope.info = "Read '" + $scope.URL + "' with " + data.length
            + " chars in a variable of type '" + typeof(data) + "'";
          }).error(function(data, status) {
            $scope.info = "Request failed with status: " + status;
          });
      };
    }      
    </script>
  </body>
</html>

注 1:元のファイルのサイズは 473.831 バイトです。
注 2:取得する画像が別のドメインに属している場合は、単純なクロスサイト リクエストを実行するためにヘッダーのリセットが必要になる場合があります。デフォルトでAngularJS 1.0.6は、ヘッダーを設定し、プリフライト リクエストをX-Requested-With: XMLHttpRequest強制します。。_ これは、サーバーによってサポートされていない可能性があります (この例のように、サーバーが a を返す場合)。ただし、このヘッダーは6 か月前に (つまり、それ以降) 削除されており、リセットはもう必要ありません (ちなみに、AngularJSに対するこの回答のおかげで、クロスオリジン リソースに対する OPTIONS HTTP リクエストが実行されます)。OPTIONSGET403 HTTP method not allowed
AngularJS 1.1.1）。

4

1 に答える 1

54

幸いなことに、Vojta Jinaはブランチ 1.1でこの機能をすでに実装しています。次のコード ( plunker を参照) は、バイナリ データを. （今日のように）まだ不安定な の使用に注意してください：ArrayBufferAngularJS 1.1.5

<!DOCTYPE html>
<html>
  <head>
    <title>Using $http.get to read binary data</title>
  </head>
  <body ng-app>
    <h1>Using $http.get to read binary data</h1>
    <div ng-controller="FetchCtrl" >
      <button ng-click="fetch()">fetch</button><br/>
      {{info}}
    </div>
    <script src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
    <script>
    // Controller
    function FetchCtrl($scope, $http) {
      // See note 1
      $scope.URL = "http://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png";
      $scope.info = "Click 'fetch' to fetch an image" ;
      $scope.fetch = function() {
        delete $http.defaults.headers.common['X-Requested-With']; // See note 2
        $http.get($scope.URL, {responseType: "arraybuffer"}).
          success(function(data) {
            $scope.info = "Read '" + $scope.URL + "' with " + data.byteLength
            + " bytes in a variable of type '" + typeof(data) + "'";
          }).
          error(function(data, status) {
            $scope.info = "Request failed with status: " + status;
          });
      };
    }      
    </script>
  </body>
</html>

注 1 および注 2:元の質問の注を参照してください。

于 2013-05-28T11:48:35.460 に答える