【rails】carrierwaveを使った画像の投稿機能の実装方法

railsでcarrierwaveを使った画像投稿機能を実装していきましょう。 paperclipっていうgemもあるけど、今回はcarrierwaveでやります。確かcarrierwaveの方が細かい設定ができた気がする。

carrierwaveを使う前の準備

まずはサンプルとしてアプリケーションを作成。mysqlを普段使っているのでデータベースはmysqlを使いますよーというオプション付き。

rails new carrierwave-sample -d mysql
rake db:create

機能を試すのにいろいろ作るのは面倒くさいのでscaffoldで。

rails g scaffold image

gemfileのcarrierwaveを記述。

gem 'carrierwave'

bundle install。

carrierwaveの設定

ここからがcarrierwaveの設定。

まずは、アップローダーを作ろう。確かアップローダーの名前は何でもいいけど、テーブル名のカラムに一致させるのが慣習だっけ？ imagesテーブルのimageカラムに画像をアップするとしてアップローダーの名前はimageにしよう。（モデルの名前もっと分かりやすくPhotoとかにすればよかった。）

rails g uploader Image

app/uploaders/image_uploader.rbっていうものができる。

カラムを追加していなかったので追加。

class CreateImages < ActiveRecord::Migration
  def change
    create_table :images do |t|
      t.text :image
      t.timestamps
    end
  end
end

rake db:migrateでデータベースに反映。

モデルファイルにuploaderの記述を追加。

class Image < ActiveRecord::Base
 mount_uploader :image, ImageUploader
end

viewをファイルがアップロードできるように変更

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

コントラーラーの記述も、imageを受け取れるように変更。

  def create
    Image.create(image_params)
    redirect_to :action => "index"
  end

  def image_params
    params.require(:image).permit(:image)
  end

redirect_to :action => “index"として投稿したらindexのページに飛ぶように設定。 このページで投稿した画像を見ることができるようにしましょう。

<% @images.each do |image| %>
  <%= image_tag(image.image) %>
<% end %>

とりあえずこんな感じで表示はされるはず。imageの羅列ですごい分かりにくい笑