Cách tải lên tệp bằng AngularJ như cách truyền thống

Question

Tôi đã thử điều này trong nhiều ngày. Giả sử tôi có một dạng như sau:

<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> 

Tôi đang sử dụng đá quý carrierwave để xử lý tải tệp lên phía sau hiện trường. Bộ điều khiển của tôi giống như sau:

$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; 
    }; 

Tuy nhiên nó không hoạt động. Điều tôi định làm là tạo biểu mẫu và tải lên mọi thứ như cách cũ, nhưng các ví dụ tôi đã tìm thấy chẳng hạn như ng-upload hoặc giống như this post hoặc jquery file upload, chúng không phù hợp với nhu cầu của tôi. Có bất kỳ ví dụ hoặc mã mẫu nào cho mục đích này không? Cảm ơn bạn.

Answer 1

Tôi nghĩ rằng "giống như cách cũ" sẽ không sử dụng Ajax, nhưng tôi đoán đó không phải là ý của bạn. :)

@ faunhusain's fiddle là một ví dụ tốt về cách sử dụng FormData object để xử lý việc tải lên tệp. Và sử dụng this site làm tham chiếu, bạn có thể sử dụng transformRequest để kết hợp đối tượng FormData.

Giữ cơ bản $http mã của bạn, sửa đổi nó để thêm các đối tượng chuyển đổi:

$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; 
}; 

Tạo một nhà máy mà sẽ kết hợp thao tác các dữ liệu mẫu vào một tải trọng sendable. Nó sẽ lặp qua dữ liệu biểu mẫu của bạn (bao gồm tệp đã tải lên) và trả lại đối tượng thân thiện với người gửi:

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

Tôi chưa thử nghiệm điều này, nhưng nó sẽ hoạt động ra khỏi hộp.