Rails 4使用carrierwave上传多个图像或文件

86

如何使用Rails 4和CarrierWave从文件选择窗口上传多张图像？我有post_controller和post_attachments模型。我怎样才能做到这一点？

有人可以提供例子吗？有一个简单的方法吗？

ruby-on-rails-4  carrierwave 
— 固态继电器
source

Answers:

195

这是从头开始在rails 4中使用载波上传多个图像的解决方案

或者，您可以找到有效的演示： 多个附件滑轨4

为此，请按照下列步骤操作。

rails new multiple_image_upload_carrierwave

在宝石文件中

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

在views / posts / _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，并在发布模型中定义accept_nested_attribute，因为rails 4中已弃用了属性access。

为了编辑附件，我们无法一次修改所有附件。因此我们将一一替换附件，或者您可以根据自己的规则进行修改。在这里，我仅向您展示如何更新任何附件。

— 固态继电器
source
2
在发布控制器的显示动作中，我认为您忘记了@post = Post.find（params [：id]）
— wael
1
@SSR为什么循环浏览每个活动中的附件create？Rails和carrierwave足够聪明，可以自动保存集合。
— 鹰2014年
3
很想看编辑（尤其是处理:_destroy部分）
— 2014年
5
@SSR-您的回答非常有帮助。您也可以通过编辑操作来更新您的答案。
— raj_on_rails 2015年
2
当我向post_attachment模型添加验证时，它们不会阻止post模型的保存。而是保存帖子，然后仅对附件模型抛出ActiveRecord无效错误。我认为这是因为创造！方法。但是使用create只会失败而无声。知道如何在邮件到达附件后进行验证吗？
— dchess 2016年
32

如果我们看一下CarrierWave的文档，现在实际上非常容易。

https://github.com/carrierwaveuploader/carrierwave/blob/master/README.md#multiple-file-uploads

作为示例，我将使用Product作为要添加图片的模型。

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

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

  2. 在预期模型中创建一列以托管图像数组：

    rails generate migration AddPicturesToProducts pictures:json

  3. 运行迁移

    bundle exec rake db:migrate

  4. 为产品添加图片

    app/models/product.rb

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

  5. 将图片添加到ProductsController中的强参数

    app/controllers/products_controller.rb

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

  6. 允许您的表格接受多张图片

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

  7. 在您的视图中，您可以引用解析图片数组的图像：

    @product.pictures[1].url

如果您从文件夹中选择几张图像，则该顺序将是您从上到下进行拍摄的确切顺序。

— Drjorgepolanco
source
9
CarrierWave对这个问题的解决方案使我感到畏缩。它涉及将对文件的所有引用放入数组的一个字段中！当然，它不会被视为“铁轨方式”。如果您随后要删除一些帖子或向帖子中添加其他文件怎么办？我并不是说这不可能，我只是说这将是丑陋的。联接表是一个更好的主意。
— Toby 1 Kenobi
3
我完全同意托比。您愿意提供这种解决方案吗？
— drjorgepolanco
2
该解决方案已由SSR提供。放置另一个模型来保存上载的文件，然后需要上载许多文件的事物与该另一个模型具有一对多或多对多关系。（我在较早的评论中提到的联接表将是多对多关系的情况）
— Toby 1 Kenobi
感谢@ Toby1Kenobi，我想知道列数组方法将如何处理图像版本（我不知道怎么做）。您的策略是可行的。
— chaostheory
我已经在Rails 5.xx，github.com / carrierwaveuploader / carrierwave / blob / master /中实现了Carrierwave的此功能， 但是我无法成功运行它，并且会产生错误，UndefinedConversionError ("\x89" from ASCII-8BIT to UTF-8) 对于SSR解决方案，它可以正常运行Rails 4.xx，但是我面临挑战（使用Rails 5.xx），即它存储ActionDispatch::Http::UploadedFile在数据库中而不是文件名中。它也不会在上传器中给定路径的公共文件夹中存储文件。
— 曼西沙（Mansi Shah），
8

对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

有关更多信息，请参见Railsfields_for表单未显示，嵌套表单

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

编辑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如此惊人的原因。

— 恭喜
source
这些实际上是@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
6

我也弄清楚了如何更新多个文件的上载，并对它进行了一些重构。这段代码是我的，但您会遇到麻烦。

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）
source
1
感谢您分享您的代码。如果您有时间，请在我的gihub存储库中更新代码，不要忘了为每种方法添加注释，以便每个人都可以轻松理解代码。
— SSR
1
我克隆了回购协议，您是否可以允许我进行PR？
— 克里斯·哈布古德
是的 您的github用户名是什么
— SSR
您有机会给我访问权限吗？
— 克里斯·哈布古德
2

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

  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）
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.