CarrierWave上传多个图像

龙俊英

2023-12-01

在构建Web应用程序时，您当然也希望添加用于图像上传的选项。在本教程中，我们将向您展示一些必要的步骤，以使您能够从头开始在Rails 4+中使用CarrierWave上传多个图像/文件 。可以将类似的过程应用于嵌套表单。

步骤1：在gem文件中

CarrierWave是Ruby的宝石，它提供了一种简单且极为灵活的方式来从Ruby应用程序上传文件。您将需要将这些gems添加到Gemfile并运行

bundle  install

gem 'carrierwave'

步骤2：设置CarrierWave

第一步， 配置CarrierWave以运行以下命令：

rails generate uploader Avatar

这将在app文件夹中创建一个名为uploaders的新目录，并在其中创建一个名为avatar_uploader.rb的文件。

class AvatarUploader < CarrierWave::Uploader:: Base
  storage :file
  def store_dir
    "uploads/ #{model. class .to_s.underscore} / #{mounted_as} / #{model.id} "
  end
  def default_url
    "/images/fallback/" + [version_name, "default.png" ].compact.join( '_' )
  end
end

store_dir您可以修改默认目录以更改上载文件的存储位置。

default_url这是默认图像的路径，如果未选择其他图像，则可以使用此图像。

步骤3：产生您的迁移

您可以使用Rails中的Scaffolding生成您的迁移。这将为上述每个生成完整的模型，视图和控制器以及测试套件。这是启动和运行项目的最简单方法。

rails g scaffold post title:string
rails g scaffold post_attachment post_id:integer avatar:string
rake db:migrate

步骤4：编辑模型

一旦脚手架完成生成文件，您就可以开始编辑模型 。

您希望能够一次性创建post和post_attachment 。为此，您需要将以下内容添加到`post.rb` ：

post.rb

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

`accepts_nested_attributes_for :post_attachments` 嵌套属性允许您通过父级将属性保存在关联记录上。

现在是时候挂载您的上传器了。导航到PostAttachment模型，然后将`mount_uploader :avatar, AvatarUploader`到文件中。

post_attachment.rb

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

步骤5：修改您的控制器

下一步是修改`post_controller`以接受那些新的嵌套属性。

post_controller.rb

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

为了确保新帖子完成后可以创建`post_attachments` ，您将需要使用`@post.post_attachments.build`进行构建。

 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,     :post_id => @post.id)
           end
           format.html { redirect_to @post, notice: 'Post was successfully     created.' }
         else
           format.html { render action: 'new' }
         end
       end
     end

为了帮助嵌套属性到达模型，您需要将以下添加到在PostController中post_params方法。

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

第6步：查看布局

为了完成应用程序的最后一步，您将需要编辑视图以允许我们上传新图像。您可以通过添加以下行来做到这一点：

< %= p.file_field :avatar , :multiple => true, name:     "post_attachments[avatar][]" %>

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

感谢您的阅读！

先前发布在https://kolosek.com/carrierwave-upload-multiple-images/

From: https://hackernoon.com/carrierwave-upload-multiple-images-7o14j3yvd