以嵌套 Rails 形式将多个图像上传到 S3答案

【问题标题】：Uploading multiple images to S3 in nested Rails form以嵌套 Rails 形式将多个图像上传到 S3
【发布时间】：2014-04-21 23:20:43
【问题描述】：

我正在尝试让文件上传与 Rails 4 应用程序中的嵌套 fields_for 标记一起使用。我已经关注了几个 Railscast，即：253、381、383，但仍然不能完全发挥其功能。还使用 Carrierwave 和 jquery 文件上传。

基本应用结构如下：

blogpost.rb

class Blogpost < ActiveRecord::Base
  has_many :blogpics
end

blogpic.rb

class Blogpic < ActiveRecord::Base
  belongs_to :blogpost
end

blogposts_controller.rb

def new
  @blogpost = Blogpost.new
  blogpic = @blogpost.blogpics.build
end

blogpost_form.html.erb

<div>
  <%= form_for @blogpost do |f| %>
    <%= render 'shared/error_messages', object: f.object %>

    <%= f.hidden_field :post_id %>
    <%= f.text_field :title %>
    <%= f.text_field :location %>
    <%= f.text_area :content %>

    <%= f.fields_for :blogpics do |builder| %>
        <%= builder.file_field :image %>
        <%= builder.hidden_field :blogpost_id %>
    <% end %>

    <p><%= f.submit %></p>
<% end %>

上传单个文件有效。但是，将 ":multiple => true, :name => 'blogpic[image]'" 添加到文件字段会破坏功能并且不会上传文件。

当我这样编辑 blogposts_controller.rb 时：

def new
  @blogpost = Blogpost.new
  3.times do
    blogpic = @blogpost.blogpics.build
  end
end

我可以分别输入三个文件，然后上传成功。 有什么方法可以实现此功能，同时能够将多个文件拖放到一个输入中？

非常感谢任何帮助和指导，谢谢。

【问题讨论】：

:blogpost_id 的 hidden_field 是否必要？你的协会不应该已经定义了这种关系吗？
dropzonejs.com 试试这个

标签： ruby-on-rails ruby file-upload amazon-web-services jquery-file-upload

【解决方案1】：

您的博文模型缺少accepts_nested_attributes 关联。

class Blogpost < ActiveRecord::Base
  has_many :blogpics
  accepts_nested_attributes_for :blogpics
end

我不太确定如何在一个对话框中处理多个文件。我想你会使用一些 javascript 来检测选择了多个文件，并为每个文件创建字段表单。

【讨论】：

我的 Rails 应用程序中确实有这个（为简单起见，我在我的问题中编辑了一些代码）。我明白你在说什么。可以使用 Jquery 文件上传，但我无法让该特定工具正常工作。如果我找到解决方案，我会继续努力并更新

【解决方案2】：

您可以将 :multiple => true 作为参数传递给builder.file_field :image。详情见http://apidock.com/rails/ActionView/Helpers/FormTagHelper/file_field_tag

通过文件输入的multiple属性，您可以拖放到输入元素上详情见http://www.html5rocks.com/en/tutorials/file/dndfiles/#toc-selecting-files

我遇到了同样的问题（其中 multiple: true 破坏了嵌套形式），我的理解是您必须在控制器接收到参数之前手动转换参数。如果您检查（使用 pry 或调试器）参数哈希，您需要在提交带有多个输入文件（在单个输入上）的父模型与带有多个输入文件（在一个输入中）的父模型之间进行比较。前者创建一个子对象数组（每个子对象都有自己的文件），而后者只创建一个子对象，将所有图像都放在一个数组中。

【讨论】：