従来の方法のようにAngularJsを使用してファイルをアップロードする方法

Question

これは数日間試しました。

<form ng-submit="create()" class="form-horizontal" enctype="multipart/form-data"> 
     <div class="control-group"> 
     <label class="control-label">name : </label> 
     <div class="controls"> 
      <input type="text" class="input-xlarge" ng-model="message.title" /> 
     </div> 
     </div> 
     <div class="control-group"> 
     <label class="control-label">avatar : </label> 
     <div class="controls"> 
      <input type="file" ng-model="message.avatar" name="message[avatar]" /> 
     </div> 
     </div> 
     <div class="well"> 
     <input class="btn btn-large btn-primary" type="submit" value="建立資料" /> 
     </div> 
    </form> 

私はキャリバーウェーブの宝石を使用して、シーンの背後にあるファイルのアップロードを処理しています。私のコントローラは次のようなものです：

$scope.create = function($scope.message){ 
    var deferred = $q.defer(); 
    $http({ 
     method: 'POST', 
     url: '/resources/messages', 
     data: $.param({message: message}), 
     headers: {'Content-Type': 'multipart/form-data'} 
    }). 
    success(function(data, status, headers, config){ 
     deferred.resolve(data); 
    }). 
    error(function(data, status, headers, config){ 
     deferred.reject(status); 
    }); 
    return deferred.promise; 
    }; 

しかし、それは動作しません。私がしようとしているのはフォームを作成して古いもののようにすべてをアップロードすることですが、ng-uploadやthis post、jquery file uploadなどのサンプルは私のニーズに合っていません。この目的のためのサンプルコードがありますか？ありがとうございました。

Answer 1

「古い方法と同じように」はAjaxを使わないことだと思いますが、それはあなたが意味するものではないと思います。 :)

@ shaunhusainのfiddleは、FormData objectを使用してファイルのアップロードを処理する方法の良い例です。 this siteを参考にして、transformRequestを使用してFormDataオブジェクトを組み込むことができます。

変換オブジェクトを追加するには、それを修正し、あなたの基本的な$httpコードを維持：

$scope.create = function(message){ 
var deferred = $q.defer(); 
$http({ 
    method: 'POST', 
    url: '/resources/messages', 
    data: message // your original form data, 
    transformRequest: formDataObject // this sends your data to the formDataObject provider that we are defining below. 
    headers: {'Content-Type': 'multipart/form-data'} 
}). 
success(function(data, status, headers, config){ 
    deferred.resolve(data); 
}). 
error(function(data, status, headers, config){ 
    deferred.reject(status); 
}); 
return deferred.promise; 
}; 

が送信可能なペイロードにフォームデータを操作組み込む予定ファクトリを作成します。これは、（アップロードされたファイルを含む）、フォームデータを反復処理し、送信者に優しいオブジェクトを返します。

app.factory('formDataObject', function() { 
    return function(data) { 
     var fd = new FormData(); 
     angular.forEach(data, function(value, key) { 
      fd.append(key, value); 
     }); 
     return fd; 
    }; 
}); 

私はこれをテストしていませんが、それは箱から出して動作するはずです。