使用carrierwave实现Rails 4的多图或文件上传

Question

我如何使用Rails 4和CarrierWave从文件选择窗口上传多个图像？ 我有一个 post_controller 和 post_attachments 模型。 我该怎么做？

有人可以提供一个例子吗？ 是否有简单的方法来完成这个任务？

- SSR

Answer 1

这是使用Carrierwave在Rails 4中从头开始上传多个图像的解决方案。或者您可以找到工作演示： Rails 4中的多个附件 只需按照以下步骤操作即可。

rails new multiple_image_upload_carrierwave

在 gem 文件中

gem 'carrierwave'
bundle install
rails generate uploader Avatar 

创建文章脚手架

rails generate scaffold post title:string

创建 post_attachment 脚手架

rails generate scaffold post_attachment post_id:integer avatar:string

rake db:migrate

在post.rb文件中。

class Post < ActiveRecord::Base
   has_many :post_attachments
   accepts_nested_attributes_for :post_attachments
end

在 post_attachment.rb 文件中

class PostAttachment < ActiveRecord::Base
   mount_uploader :avatar, AvatarUploader
   belongs_to :post
end

在 post_controller.rb 文件中

def show
   @post_attachments = @post.post_attachments.all
end

def new
   @post = Post.new
   @post_attachment = @post.post_attachments.build
end

def create
   @post = Post.new(post_params)

   respond_to do |format|
     if @post.save
       params[:post_attachments]['avatar'].each do |a|
          @post_attachment = @post.post_attachments.create!(:avatar => a)
       end
       format.html { redirect_to @post, notice: 'Post was successfully created.' }
     else
       format.html { render action: 'new' }
     end
   end
 end

 private
   def post_params
      params.require(:post).permit(:title, post_attachments_attributes: [:id, :post_id, :avatar])
   end

在视图/帖子/_form.html.erb中。

<%= 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 %>

编辑任何帖子的附件和附件列表。 在views/posts/show.html.erb中

<p id="notice"><%= notice %></p>

<p>
  <strong>Title:</strong>
  <%= @post.title %>
</p>

<% @post_attachments.each do |p| %>
  <%= image_tag p.avatar_url %>
  <%= link_to "Edit Attachment", edit_post_attachment_path(p) %>
<% end %>

<%= link_to 'Edit', edit_post_path(@post) %> |
<%= link_to 'Back', posts_path %>

更新表单以编辑附件 views/post_attachments/_form.html.erb

<%= image_tag @post_attachment.avatar %>
<%= form_for(@post_attachment) do |f| %>
  <div class="field">
    <%= f.label :avatar %><br>
    <%= f.file_field :avatar %>
  </div>
  <div class="actions">
    <%= f.submit %>
  </div>
<% end %>

修改 post_attachment_controller.rb 中的更新方法。

def update
  respond_to do |format|
    if @post_attachment.update(post_attachment_params)
      format.html { redirect_to @post_attachment.post, notice: 'Post attachment was successfully updated.' }
    end 
  end
end

在Rails 3中，无需定义强参数，因为您可以在模型和接受嵌套属性的模型中定义attribute_accessible。因为attribute accessible在Rails 4中已被弃用。

要编辑附件，我们不能一次修改所有附件。因此，我们将逐个替换附件，或者根据您的规则进行修改。这里我只是向您展示如何更新任何附件。

- SSR

---

在帖子控制器的展示操作中，我认为您忘记了@post = Post.find(params[:id])。 - wael

@SSR 为什么在 create 动作中要循环遍历每个帖子附件？Rails 和 carrierwave 已经足够智能，可以自动保存集合。 - hawk

非常乐意看到编辑（特别是处理 :_destroy 部分）。 - Tun

您的回答非常有帮助。您能否更新您的回答并进行编辑操作。 - raj_on_rails

当我在post_attachment模型中添加验证时，它们并不能阻止post模型的保存。相反，帖子被保存，然后只为附件模型抛出ActiveRecord无效错误。我认为这是由于create!方法造成的，但使用create代替只会静默失败。有什么办法让验证发生在post中并影响到附件吗？ - dchess

Answer 2

如果我们查看CarrierWave的文档，现在实际上非常容易。https://github.com/carrierwaveuploader/carrierwave/blob/master/README.md#multiple-file-uploads 我将以Product作为我想要添加图片的模型，作为示例。

1. 获取Carrierwave的主分支并将其添加到您的Gemfile中：

gem 'carrierwave', github:'carrierwaveuploader/carrierwave'

在目标模型中创建一个列来存储图像数组：

rails generate migration AddPicturesToProducts pictures:json

运行数据迁移

bundle exec rake db:migrate

向产品模型添加图片

app/models/product.rb

class Product < ActiveRecord::Base
  validates :name, presence: true
  mount_uploaders :pictures, PictureUploader
end

在ProductsController中的强参数（Strong Params）中添加图片

app/controllers/products_controller.rb

def product_params
  params.require(:product).permit(:name, pictures: [])
end

允许您的表单接受多张照片

app/views/products/new.html.erb

# notice 'html: { multipart: true }'
<%= form_for @product, html: { multipart: true } do |f| %>
  <%= f.label :name %>
  <%= f.text_field :name %>

  # notice 'multiple: true'
  <%= f.label :pictures %>
  <%= f.file_field :pictures, multiple: true, accept: "image/jpeg, image/jpg, image/gif, image/png" %>

  <%= f.submit "Submit" %>
<% end %>

在您的观点中，您可以引用解析图片数组的图像：

@product.pictures[1].url

如果您从一个文件夹中选择了多张图片，它们的顺序将按照您从上到下选择的确切顺序排列。

如果您从一个文件夹中选择了多张图片，它们的顺序将按照您从上到下选择的确切顺序排列。

- drjorgepolanco

---

CarrierWave 对这个问题的解决方案让我感到不舒服。它涉及将所有文件的引用放入一个数组字段中！这肯定不会被认为是符合“Rails方式”的。如果您想要删除一些文件或向帖子添加额外文件，该怎么办？我不是说这不可能，我只是说这样做会很丑陋。使用联接表是更好的思路。 - Toby 1 Kenobi

我完全赞同，Toby。您是否能够提供解决方案呢？ - drjorgepolanco

该解决方案已由SSR提供。另一种模型被放置来保存上传的文件，然后需要上传多个文件的事物与该其他模型之间存在一对多或多对多的关系。（我在早些时候评论中提到的连接表将用于多对多关系的情况） - Toby 1 Kenobi

我已经使用Rails 5.x.x实现了Carrierwave的此功能，参考链接 https://github.com/carrierwaveuploader/carrierwave/blob/master/README.md#multiple-file-uploads但是我无法成功运行它，而且会生成错误信息UndefinedConversionError ("\x89" from ASCII-8BIT to UTF-8)对于SSR解决方案，在Rails 4.x.x下可以正常工作，但在Rails 5.x.x下出现了挑战。例如，它将 ActionDispatch::Http::UploadedFile 存储在数据库中而不是文件名。同时也没有将文件存储在上传器指定路径的公共文件夹中。 - Mansi Shah

将一个实体的多个图像放在一个JSON/文本字段中，也使得无法为这些图像分配“标题”和“alt”属性，除非可以使用嵌套的JSON来实现。有什么想法吗？ - W.M.

Answer 3

一些关于SSR的小补充： accepts_nested_attributes_for不需要您更改父对象的控制器。因此，如果要更正...

name: "post_attachments[avatar][]"

为了

name: "post[post_attachments_attributes][][avatar]"

那么所有这些控制器的更改都变得多余：

params[:post_attachments]['avatar'].each do |a|
  @post_attachment = @post.post_attachments.create!(:avatar => a)
end

您还应将PostAttachment.new添加到父对象表单中：

在views/posts/_form.html.erb文件中

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

这将使父控制器中的更改变得多余：

@post_attachment = @post.post_attachments.build

了解更多信息，请参见Rails fields_for表单未显示，嵌套表单

如果您使用的是Rails 5，则将Rails.application.config.active_record.belongs_to_required_by_default值从true更改为false（在config / initializers / new_framework_defaults.rb中），由于accepts_nested_attributes_for内部存在错误（否则accepts_nested_attributes_for通常不起作用在Rails 5下）。

编辑1：

关于destroy的添加：

在models / post.rb中

class Post < ApplicationRecord
    ...
    accepts_nested_attributes_for :post_attachments, allow_destroy: true
end

在views/posts/_form.html.erb文件中

 <% f.object.post_attachments.each do |post_attachment| %>
    <% if post_attachment.id %>

      <%

      post_attachments_delete_params =
      {
      post:
        {              
          post_attachments_attributes: { id: post_attachment.id, _destroy: true }
        }
      }

      %>

      <%= link_to "Delete", post_path(f.object.id, post_attachments_delete_params), method: :patch, data: { confirm: 'Are you sure?' } %>

      <br><br>
    <% end %>
  <% end %>

这样，您根本不需要拥有子对象的控制器！我的意思是不再需要任何PostAttachmentsController了。至于父对象的控制器(PostController)，您也几乎不需要更改它 - 您所做的唯一更改就是在其中更改白名单参数列表(以包括与子对象相关的参数)，如下所示:

def post_params
  params.require(:post).permit(:title, :text, 
    post_attachments_attributes: ["avatar", "@original_filename", "@content_type", "@headers", "_destroy", "id"])
end

这就是为什么accepts_nested_attributes_for如此神奇。

- prograils

---

这些实际上是对@SSR答案的重大补充，而不是次要的 :) accept_nested_attributes_for相当重要。事实上，根本不需要子控制器。通过遵循您的方法，我唯一无法做到的就是在上传出现问题时显示子表单错误消息。 - Luis Fernando Alen

感谢您的输入。我已经让上传功能正常工作了，但我想知道如何在views/posts/_form.html.erb中向post_attachments表单字段添加其他属性？ <%= d.text_field :copyright, name: "album[diapos_attributes][][copyright]", class: 'form-field' %> 只将版权写入最后一条记录，而不是所有记录。 - SEJU

Answer 4

我还想告诉你，我找到了一种更新多文件上传的方法，并对其进行了一些重构。这段代码是我的，但你应该明白我的意思。

def create
  @motherboard = Motherboard.new(motherboard_params)
  if @motherboard.save
    save_attachments if params[:motherboard_attachments]
    redirect_to @motherboard, notice: 'Motherboard was successfully created.'
  else
    render :new
  end
end


def update
  update_attachments if params[:motherboard_attachments]
  if @motherboard.update(motherboard_params)
    redirect_to @motherboard, notice: 'Motherboard was successfully updated.'
  else
   render :edit
  end
end

private
def save_attachments
  params[:motherboard_attachments]['photo'].each do |photo|
    @motherboard_attachment = @motherboard.motherboard_attachments.create!(:photo => photo)
  end
end

 def update_attachments
   @motherboard.motherboard_attachments.each(&:destroy) if @motherboard.motherboard_attachments.present?
   params[:motherboard_attachments]['photo'].each do |photo|
     @motherboard_attachment = @motherboard.motherboard_attachments.create!(:photo => photo)
   end
 end

- Chris Habgood

---

感谢分享你的代码。当你有时间时，请更新我的GitHub仓库中的代码，并不要忘记为每个方法添加注释，这样每个人都可以轻松理解代码。 - SSR

我已经克隆了代码库，你能给我权限进行PR吗？ - Chris Habgood

好的，你的 Github 用户名是什么？ - SSR

你有没有机会给我授权访问？ - Chris Habgood

Answer 5

使用关联 @post.post_attachments 时，无需设置 post_id。

- Chris Habgood

Answer 6

这是我对模型进行的第二次重构：

1. 将私有方法移至模型中。
2. 用self替换@motherboard。

控制器：

def create
  @motherboard = Motherboard.new(motherboard_params)

  if @motherboard.save
    @motherboard.save_attachments(params) if params[:motherboard_attachments]
  redirect_to @motherboard, notice: 'Motherboard was successfully created.'
  else
    render :new
  end
end

def update
  @motherboard.update_attachments(params) if params[:motherboard_attachments]
  if @motherboard.update(motherboard_params)
    redirect_to @motherboard, notice: 'Motherboard was successfully updated.'
  else
    render :edit
  end
end

在主板型号中：

def save_attachments(params)
  params[:motherboard_attachments]['photo'].each do |photo|
    self.motherboard_attachments.create!(:photo => photo)
  end
end

def update_attachments(params)
  self.motherboard_attachments.each(&:destroy) if self.motherboard_attachments.present?
  params[:motherboard_attachments]['photo'].each do |photo|
    self.motherboard_attachments.create!(:photo => photo)
  end
end

- Chris Habgood