使用载波以嵌套形式上传多个图像 [英] multiple image uploads in a nested form with carrierwave

问题描述

我正在跟踪 railscasts第381条，试图允许显示多个图像使用carrierwave gem&上传到我的应用jQuery文件上传.

I'm following railscasts episode 381 in an attempt to allow multiple image uploads to my app with the carrierwave gem & jQuery File upload.

我的应用程序用于大学项目&是使用 hikingtrails模型设置的，该模型具有许多&接受图片模型的嵌套属性.

My app is for a college project & is set up with a hikingtrails model which has many & accepts nested attributes for a pics model.

将file_field的Multiple选项设置为true后，硬编码输入名称属性，即<%= form.file_field :image, multiple: true, name: "pic[image]" %>，carrierwave停止工作，它没有像以前那样上传单个文件.

After I set the multiple option of the file_field to true & hard-coding the input name attribute i.e. <%= form.file_field :image, multiple: true, name: "pic[image]" %>, carrierwave stops working, it doesn't upload a single file as it did before.

这与使用嵌套表单有关吗?我还尝试将教程实施到我的计算机中应用没有成功.

Could this have something to do with using nested forms? I've also tried implementing this tutorial into my app without any success.

我还尝试将两种形式都做成多部分，而不仅仅是父形式&删除我正在使用的simple_form宝石.

I've also tried making both forms multi part rather than just the parent form & removing the simple_form gem that I'm using.

我还尝试过删除部分&表单将嵌套的表单放在本地，但这无济于事.也许这与我将file_field设置为倍数有关，因为这是问题开始的地方.

I've also tried removing the form partial & putting the nested form in locally but that didn't help. Perhaps it has something to do with how I'm setting the file_field to multiple as this is where the issue began.

任何建议或替代方法都将不胜感激

Any suggestions or an alternative approach would really be appreciated

class Pic < ActiveRecord::Base
  belongs_to :hikingtrail

  attr_accessible :img_name, :image, :remote_image_url

  mount_uploader :image, ImageUploader
end

&

class Hikingtrail < ActiveRecord::Base
  attr_accessible :description, 
                                  :duration_hours, 
                                  :duration_mins, 
                                  :meta_description, 
                                  :name, 
                                  :looped,
                                  :pics_attributes

    validates :name,  :presence => true

    has_many :pics

    accepts_nested_attributes_for :pics, :allow_destroy => :true,
    :reject_if => proc { |attrs| attrs.all? { |k, v| v.blank? } }
end

观看次数

hikingtrails/_form.html.erb

<% @hikingtrail.pics.build %>
<%= simple_form_for @hikingtrail, :html => {:multipart => true}  do |f| %>

<%= f.input :name %>    

<%= f.input :description, :input_html => { :cols => 10, :rows => 3 } %>

<%= f.input :looped %>


  <h2>Images</h2>
  <%= render :partial => 'pics/form',
             :locals => {:form => f} %>


  <div class="form-actions">
    <%= f.submit nil, :class => 'btn btn-primary' %>
    <%= link_to t('.cancel', :default => t("helpers.links.cancel")),
                hikingtrails_path, :class => 'btn' %>
  </div>
<% end %>

pics/_form.html.erb

<%= form.fields_for :pics do |pic_form| %>
  <div class="field">

    <% unless pic_form.object.nil? || pic_form.object.new_record? %>
    <%= image_tag pic_form.object.image_url(:thumb).to_s %>
    <% end %>

    <% if pic_form.object.nil? || pic_form.object.new_record? %>
    <%= pic_form.file_field :image, multiple: true, name: "pic[image]" %>
    <% end %>

  </div>
  <% unless pic_form.object.nil? || pic_form.object.new_record? %>
    <div class="field">
      <%= pic_form.label :_destroy, 'Remove:' %>
      <%= pic_form.check_box :_destroy %>
    </div>
  <% end %>
<% end %>

端子输出

Started PUT "/hikingtrails/7" for 127.0.0.1 at 2013-03-24 13:55:17 +0000
Processing by HikingtrailsController#update as HTML
  Parameters: {"utf8"=>"✓", "authenticity_token"=>"trGCi0Gz+CNRmwAoktcYmeplEKW5bZBtozkduNIXvcI=", "hikingtrail"=>{"name"=>"Dunran Woods", "meta_description"=>"Nice walk through the woods", "description"=>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.", "looped"=>"0", "duration_hours"=>"9", "duration_mins"=>"45"}, "pic"=>{"image"=>#<ActionDispatch::Http::UploadedFile:0x007f288085cc08 @original_filename="spink_sleepers.jpg", @content_type="image/jpeg", @headers="Content-Disposition: form-data; name=\"pic[image]\"; filename=\"spink_sleepers.jpg\"\r\nContent-Type: image/jpeg\r\n", @tempfile=#<File:/tmp/RackMultipart20130324-7791-19ma2cb>>}, "commit"=>"Update Hikingtrail", "id"=>"7"}
  Hikingtrail Load (3.7ms)  SELECT "hikingtrails".* FROM "hikingtrails" WHERE "hikingtrails"."id" = $1 LIMIT 1  [["id", "7"]]
   (0.1ms)  BEGIN
   (0.1ms)  COMMIT
Redirected to http://0.0.0.0:3000/hikingtrails/7
Completed 302 Found in 6ms (ActiveRecord: 3.8ms)


Started GET "/hikingtrails/7" for 127.0.0.1 at 2013-03-24 13:55:17 +0000
Processing by HikingtrailsController#show as HTML
  Parameters: {"id"=>"7"}
  Hikingtrail Load (3.4ms)  SELECT "hikingtrails".* FROM "hikingtrails" WHERE "hikingtrails"."id" = $1 LIMIT 1  [["id", "7"]]
  Pic Load (0.2ms)  SELECT "pics".* FROM "pics" WHERE "pics"."hikingtrail_id" = 7
  Rendered collection (0.0ms)
  Rendered hikingtrails/show.html.erb within layouts/application (2.6ms)
  Rendered layouts/_navbar.html.erb (0.9ms)
  Rendered layouts/_footer.html.erb (0.3ms)
Completed 200 OK in 41ms (Views: 36.2ms | ActiveRecord: 3.7ms)


Started GET "/assets/application.css?body=1" for 127.0.0.1 at 2013-03-24 13:55:17 +0000
Served asset /application.css - 304 Not Modified (0ms)
[2013-03-24 13:55:17] WARN  Could not determine content-length of response body. Set content-length of the response or set Response#chunked = true


Started GET "/assets/bootstrap_and_overrides.css?body=1" for 127.0.0.1 at 2013-03-24 13:55:17 +0000
Served asset /bootstrap_and_overrides.css - 304 Not Modified (0ms)
[2013-03-24 13:55:17] WARN  Could not determine content-length of response body. Set content-length of the response or set Response#chunked = true


Started GET "/assets/jquery-fileupload/vendor/jquery.ui.widget.js?body=1" for 127.0.0.1 at 2013-03-24 13:55:17 +0000
Served asset /jquery-fileupload/vendor/jquery.ui.widget.js - 304 Not Modified (5ms)


Started GET "/assets/jquery_ujs.js?body=1" for 127.0.0.1 at 2013-03-24 13:55:17 +0000
Served asset /jquery_ujs.js - 304 Not Modified (0ms)


Started GET "/assets/jquery.js?body=1" for 127.0.0.1 at 2013-03-24 13:55:17 +0000
Served asset /jquery.js - 304 Not Modified (0ms)
[2013-03-24 13:55:17] WARN  Could not determine content-length of response body. Set content-length of the response or set Response#chunked = true
[2013-03-24 13:55:17] WARN  Could not determine content-length of response body. Set content-length of the response or set Response#chunked = true
[2013-03-24 13:55:17] WARN  Could not determine content-length of response body. Set content-length of the response or set Response#chunked = true


Started GET "/assets/twitter/bootstrap/bootstrap-transition.js?body=1" for 127.0.0.1 at 2013-03-24 13:55:17 +0000
Served asset /twitter/bootstrap/bootstrap-transition.js - 304 Not Modified (0ms)


Started GET "/assets/jquery-fileupload/jquery.fileupload.js?body=1" for 127.0.0.1 at 2013-03-24 13:55:17 +0000
Served asset /jquery-fileupload/jquery.fileupload.js - 304 Not Modified (0ms)


Started GET "/assets/jquery-fileupload/jquery.iframe-transport.js?body=1" for 127.0.0.1 at 2013-03-24 13:55:17 +0000
Served asset /jquery-fileupload/jquery.iframe-transport.js - 304 Not Modified (0ms)


Started GET "/assets/jquery-fileupload/basic.js?body=1" for 127.0.0.1 at 2013-03-24 13:55:17 +0000
Served asset /jquery-fileupload/basic.js - 304 Not Modified (0ms)
[2013-03-24 13:55:17] WARN  Could not determine content-length of response body. Set content-length of the response or set Response#chunked = true
[2013-03-24 13:55:17] WARN  Could not determine content-length of response body. Set content-length of the response or set Response#chunked = true
[2013-03-24 13:55:17] WARN  Could not determine content-length of response body. Set content-length of the response or set Response#chunked = true


Started GET "/assets/twitter/bootstrap/bootstrap-modal.js?body=1" for 127.0.0.1 at 2013-03-24 13:55:17 +0000
Served asset /twitter/bootstrap/bootstrap-modal.js - 304 Not Modified (0ms)
[2013-03-24 13:55:17] WARN  Could not determine content-length of response body. Set content-length of the response or set Response#chunked = true


Started GET "/assets/twitter/bootstrap/bootstrap-alert.js?body=1" for 127.0.0.1 at 2013-03-24 13:55:17 +0000
Served asset /twitter/bootstrap/bootstrap-alert.js - 304 Not Modified (0ms)
[2013-03-24 13:55:17] WARN  Could not determine content-length of response body. Set content-length of the response or set Response#chunked = true
[2013-03-24 13:55:17] WARN  Could not determine content-length of response body. Set content-length of the response or set Response#chunked = true


Started GET "/assets/twitter/bootstrap/bootstrap-dropdown.js?body=1" for 127.0.0.1 at 2013-03-24 13:55:17 +0000
Served asset /twitter/bootstrap/bootstrap-dropdown.js - 304 Not Modified (8ms)
[2013-03-24 13:55:18] WARN  Could not determine content-length of response body. Set content-length of the response or set Response#chunked = true


Started GET "/assets/twitter/bootstrap/bootstrap-tab.js?body=1" for 127.0.0.1 at 2013-03-24 13:55:18 +0000
Served asset /twitter/bootstrap/bootstrap-tab.js - 304 Not Modified (8ms)


Started GET "/assets/twitter/bootstrap/bootstrap-scrollspy.js?body=1" for 127.0.0.1 at 2013-03-24 13:55:18 +0000
Served asset /twitter/bootstrap/bootstrap-scrollspy.js - 304 Not Modified (3ms)


Started GET "/assets/twitter/bootstrap/bootstrap-popover.js?body=1" for 127.0.0.1 at 2013-03-24 13:55:18 +0000
Served asset /twitter/bootstrap/bootstrap-popover.js - 304 Not Modified (0ms)
[2013-03-24 13:55:18] WARN  Could not determine content-length of response body. Set content-length of the response or set Response#chunked = true
[2013-03-24 13:55:18] WARN  Could not determine content-length of response body. Set content-length of the response or set Response#chunked = true


Started GET "/assets/twitter/bootstrap/bootstrap-tooltip.js?body=1" for 127.0.0.1 at 2013-03-24 13:55:18 +0000
Served asset /twitter/bootstrap/bootstrap-tooltip.js - 304 Not Modified (0ms)
[2013-03-24 13:55:18] WARN  Could not determine content-length of response body. Set content-length of the response or set Response#chunked = true
[2013-03-24 13:55:18] WARN  Could not determine content-length of response body. Set content-length of the response or set Response#chunked = true


Started GET "/assets/twitter/bootstrap/bootstrap-button.js?body=1" for 127.0.0.1 at 2013-03-24 13:55:18 +0000
Served asset /twitter/bootstrap/bootstrap-button.js - 304 Not Modified (0ms)
[2013-03-24 13:55:18] WARN  Could not determine content-length of response body. Set content-length of the response or set Response#chunked = true


Started GET "/assets/twitter/bootstrap/bootstrap-carousel.js?body=1" for 127.0.0.1 at 2013-03-24 13:55:18 +0000
Served asset /twitter/bootstrap/bootstrap-carousel.js - 304 Not Modified (0ms)


Started GET "/assets/twitter/bootstrap/bootstrap-affix.js?body=1" for 127.0.0.1 at 2013-03-24 13:55:18 +0000
Served asset /twitter/bootstrap/bootstrap-affix.js - 304 Not Modified (0ms)
[2013-03-24 13:55:18] WARN  Could not determine content-length of response body. Set content-length of the response or set Response#chunked = true


Started GET "/assets/twitter/bootstrap/bootstrap-collapse.js?body=1" for 127.0.0.1 at 2013-03-24 13:55:18 +0000
Served asset /twitter/bootstrap/bootstrap-collapse.js - 304 Not Modified (0ms)
[2013-03-24 13:55:18] WARN  Could not determine content-length of response body. Set content-length of the response or set Response#chunked = true


Started GET "/assets/twitter/bootstrap/bootstrap-typeahead.js?body=1" for 127.0.0.1 at 2013-03-24 13:55:18 +0000
Served asset /twitter/bootstrap/bootstrap-typeahead.js - 304 Not Modified (0ms)
[2013-03-24 13:55:18] WARN  Could not determine content-length of response body. Set content-length of the response or set Response#chunked = true
[2013-03-24 13:55:18] WARN  Could not determine content-length of response body. Set content-length of the response or set Response#chunked = true


Started GET "/assets/bootstrap.js?body=1" for 127.0.0.1 at 2013-03-24 13:55:18 +0000
Served asset /bootstrap.js - 304 Not Modified (0ms)


Started GET "/assets/twitter/bootstrap.js?body=1" for 127.0.0.1 at 2013-03-24 13:55:18 +0000
Served asset /twitter/bootstrap.js - 304 Not Modified (0ms)


Started GET "/assets/pics.js?body=1" for 127.0.0.1 at 2013-03-24 13:55:18 +0000
Served asset /pics.js - 304 Not Modified (0ms)
[2013-03-24 13:55:18] WARN  Could not determine content-length of response body. Set content-length of the response or set Response#chunked = true
[2013-03-24 13:55:18] WARN  Could not determine content-length of response body. Set content-length of the response or set Response#chunked = true
[2013-03-24 13:55:18] WARN  Could not determine content-length of response body. Set content-length of the response or set Response#chunked = true


Started GET "/assets/static_pages.js?body=1" for 127.0.0.1 at 2013-03-24 13:55:18 +0000
Served asset /static_pages.js - 304 Not Modified (0ms)


Started GET "/assets/hikingtrails.js?body=1" for 127.0.0.1 at 2013-03-24 13:55:18 +0000
Served asset /hikingtrails.js - 304 Not Modified (0ms)


Started GET "/assets/application.js?body=1" for 127.0.0.1 at 2013-03-24 13:55:18 +0000
Served asset /application.js - 304 Not Modified (2ms)
[2013-03-24 13:55:18] WARN  Could not determine content-length of response body. Set content-length of the response or set Response#chunked = true
[2013-03-24 13:55:18] WARN  Could not determine content-length of response body. Set content-length of the response or set Response#chunked = true
[2013-03-24 13:55:18] WARN  Could not determine content-length of response body. Set content-length of the response or set Response#chunked = true


Started GET "/assets/fontawesome-webfont.woff?v=3.0.2" for 127.0.0.1 at 2013-03-24 13:55:18 +0000
Served asset /fontawesome-webfont.woff - 304 Not Modified (0ms)
[2013-03-24 13:55:18] WARN  Could not determine content-length of response body. Set content-length of the response or set Response#chunked = true

推荐答案

我花了很长时间尝试实现类似的东西.也许我对这篇文章的回答可能会对您有所帮助.

I spent a long time trying to implement something similar. Perhaps my answer on this post may help you.

Rails 3 + JQuery-File-Upload + Nested Model

这篇关于使用载波以嵌套形式上传多个图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！