我正在使用带有ng-file-upload的AngularJs和带有CarrierWave的Ruby on Rails 4。 我有一个多步骤表单,其中包含一个名为CreateEvent
的工厂,用于在整个表单中保存数据。 这是工厂:
.factory('CreateEvent', function(){
var formData = {};
formData.image_collection = [];
return {
getFormData:function(){
return formData;
},
addImage:function(image){
formData.image_collection.push(image)
},
images:function(){
return formData.image_collection;
}
}
})
这是控制器。 我只为表格中的所有视图使用一个控制器。
.controller('ActivityDashboardCtrl', function($scope, $cordovaImagePicker, $ionicPlatform, CreateEvent, Upload) {
$scope.formData = CreateEvent;
$scope.saveForm = function(){
Upload.upload({url: "http://localhost:3000/api/events", data: $scope.formData.getFormData()});
}
})
经过多步骤表单的多个页面后,最终视图允许用户上传多张照片。 从控制器中可以看到,所有表单数据都保存在$scope.formData
。
这是最终观点:
<button class="button button-full button-positive" ng-click="saveForm()">
Upload Images
</button>
当我单击该按钮时,它成功地向服务器发送了一个发布请求。 但是,服务器未正确保存图像。 我知道服务器可以工作,因为图像是通过另一个api成功创建的。 我不确定发布请求是包含实际图像还是仅包含图像的字符串。 以下是包含有关请求信息的服务器日志:
Started POST "/api/events" for ::1 at 2016-04-19 11:19:19 -0400
Processing by Api::EventsController#create as HTML
Parameters: {"image_collection"=>{"0"=>"file:///Users/philipgreenwald/Library/Developer/CoreSimulator/Devices/9B6CA8AC-0A18-4EBB-940E-9ADAE963F26E/data/Containers/Data/Application/37787F7F-CDF0-4F87-A579-5C23D4C154F8/tmp/cdv_photo_055.jpg"}, "category"=>"Special Events", "sub_categories"=>{"Funeral"=>"Funeral"}}
the params are:
{"image_collection"=>{"0"=>"file:///Users/philipgreenwald/Library/Developer/CoreSimulator/Devices/9B6CA8AC-0A18-4EBB-940E-9ADAE963F26E/data/Containers/Data/Application/37787F7F-CDF0-4F87-A579-5C23D4C154F8/tmp/cdv_photo_055.jpg"}, "category"=>"Special Events", "sub_categories"=>{"Funeral"=>"Funeral"}, "controller"=>"api/events", "action"=>"create"}
(0.0ms) begin transaction
SQL (0.2ms) INSERT INTO "pictures" ("file", "created_at", "updated_at") VALUES (?, ?, ?) [["file", nil], ["created_at", "2016-04-19 15:19:19.530242"], ["updated_at", "2016-04-19 15:19:19.530242"]]
(1.2ms) commit transaction
Completed 200 OK in 7ms (ActiveRecord: 1.7ms)
我不确定这是否相关,但这里是将图像添加到formData
的函数:
$cordovaImagePicker.getPictures(options).then(function (results) {
// Loop through acquired images
for (var i = 0; i < results.length; i++) {
console.log(i);
console.log(results[i]);
$scope.formData.addImage(results[i]);
}
}
我很确定这是一个客户端问题,与我在控制器中调用upload
的方式有关。 我该如何解决?