Question

我使用带有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的方式有关。我该如何解决这个问题？

无法将带有ng-file-upload的图片上传到Rails

0 个答案: