如何使用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> 

我正在使用carrierwave gem來處理文件上傳在場景後面。我的控制器是這樣的：

$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的小提琴是如何使用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; 
    }; 
}); 

我沒有測試過這一點，但它應該工作開箱。