每个对象上传多张图片

时间:2015-09-24 07:57:17

标签: ruby-on-rails ruby-on-rails-4 railstutorial.org

我正在尝试将一张图片添加到Rails Tutorial的帖子中,并将其扩展到我的需求。我有一个指南,它可以有许多与之相关的图片,而不仅仅是教程中的一个。

我希望有一个按钮来上传图片。用户应该能够重复使用此按钮上传多张图片。

我正在尝试使用accepts_nested_attributes,就像在这个答案中一样,但我不确定如何使用它:Rails 4 multiple image or file upload using carrierwave

我的指南模型:

class Guide < ActiveRecord::Base
  belongs_to :user
  has_many :guide_pics, dependent: :destroy
  accepts_nested_attributes_for :guide_pics
end

我的GuidePic模型:

class GuidePic < ActiveRecord::Base
  belongs_to :guide
  validates :guide_id, presence: true

  default_scope -> { order(created_at: :desc) }

  mount_uploader :picture, PictureUploader
end

我的编辑视图渲染图片上传器,允许我选择图片。我不认为我需要显示它的代码,但我可以在必要时提供它。当我点击上传时,它会进入我的指南控制器。我的GuidePics控制器中没有任何内容。

我认为我的指南控制器必须更新图片,我正在尝试调用guide_params

@guide.update_attributes guide_params

但我不明白我的guide_params功能需要什么。我给了我一个错误“未经许可的参数:图片”:

def guide_params
   params.require(:guide).permit(:name, :city, :province, :country, :description, 
                                guide_pics_attributes: [:id, :guide_id, :picture]) 
end

另外,这是我上传图片的表格:

<!-- Upload pictures -->
<div class="col-md-2 col-md-offset-1">
   <strong>Upload A Picture</strong>
</div>
<div class="col-md-8 guide-edit-form guide-pic-upload">
  <%= form_for(@guide, html: { multipart: true }) do |f| %>
    <div class="picture" style="float:left;">
      <%= f.file_field :picture %>
    </div>
    <div style="">
      <%= f.submit "Upload", class: "btn btn-primary edit-guide-btn" %>
  </div>
  <% end %>
</div>

问题出在我的表格上。根据Matt的回答,这是解决方案:

<!-- Upload pictures -->
<div class="col-md-2 col-md-offset-1">
   <strong>Upload A Picture</strong>
</div>
<div class="col-md-8 guide-edit-form guide-pic-upload">
  <%= form_for(@guide, html: { multipart: true }) do |f| %>
    <%= f.fields_for :guide_pics, @guide.guide_pics.build do |p| %>
      <div class="picture" style="float:left;">
        <%= p.file_field :picture %>
      </div>
    <% end %>
    <div style="">
      <%= f.submit "Upload", class: "btn btn-primary edit-guide-btn" %>
  </div>
  <% end %>
</div>

1 个答案:

答案 0 :(得分:1)

阅读您再次链接的指南,您需要使用fields_for作为表单的子项目组件:

<%= form_for(@post, :html => { :multipart => true }) do |f| %>
    <div class="field">
        <%= f.label :title %><br>
        <%= f.text_field :title %>
    </div>

    <%= f.fields_for :post_attachments do |p| %>
        <div class="field">
            <%= p.label :avatar %><br>
            <%= p.file_field :avatar, :multiple => true, name: "post_attachments[avatar][]" %>
        </div>
    <% end %>

    <div class="actions">
        <%= f.submit %>
    </div>
<% end %>

所以在你的情况下,更像是:

<%= form_for(@guide, html: { multipart: true }) do |f| %>
    <%= f.fields_for :post_attachments do |p| %> 
        <div class="picture" style="float:left;">
            <%= p.file_field :picture %>
        </div>
    <% end %>
    <div style="">
        <%= f.submit "Upload", class: "btn btn-primary edit-guide-btn" %>
    </div>
<% end %>