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

问题描述 投票:1回答:0

我正在使用带有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的方式有关。 我该如何解决?

angularjs carrierwave angularjs-service angularjs-factory ng-file-upload
© www.soinside.com 2019 - 2024. All rights reserved.