Rails 画像投稿機能の導入

CarrierWaveとMiniMagickを使って画像を投稿できるようにしていきます。この2つはインストール済みということを前提にして進めていきます。

画像のアップローダーの作成

% rails g uploader image

を実行すると、app/uploadesディレクトリにimage_uploader.rbが作成されます。

アップローダーとモデルの紐付け

次に、作成したアップローダーと関連するモデルを紐付けます。Boardモデルのboard_imageカラムと紐付けることを仮定します。board_imageカラムはstring型で生成します。カラムの生成方法は、

rails g migration AddBoardImageToBoards board_image:string

を実行。

class Board < ApplicationRecord
  mount_uploader :board_image, ImageUploader
end

これで紐付けが完了しました。 生成されたアップローダーにデフォルトの画像と、アップロード可能なファイルの種類を指定します。

class ImageUploader < CarrierWave::Uploader::Base

  def store_dir
    "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
  end

  def default_url
    '〇〇.png'
  end

  def extension_whitelist 
    %w(jpg jpeg gif png)
  end

end

アップロード先のファイルを.gitignoreに登録しておきます。

/public/uploads

画像の設定

image_uploader.rbを編集して、MiniMagick経由で画像のリサイズを行えるようにします。

class ImageUploader < CarrierWave::Uploader::Base
  include CarrierWave::MiniMagick
  process resize_to_fit: [300, 200]
end

としてあげるとリサイズすることができます。

view側の記述

ラベルと画像投稿用のフォームを作ります。

<%= f.label :board_image,"サムネイル" %>
<%= f.file_field :board_image %>

投稿が許可されるようにpermitするカラムの追加もします。

def board_params
  params.require(:board).permit(:title, :body, :user_id,:board_image)
end

フォームに送信した画像を呼び出すには、

<%= image_tag board.board_image_url %>

で呼び出すことができます。

画像を保存しないときはデフォルトにしたい

def default_url
  '〇〇.png'
end

これをimageアップローダーに記述していたため、画像を載せないときはデフォルトで、〇〇.pngが乗ることになる。

参考

https://techtechmedia.com/carrierwave-minimagick-image/ https://ecolotta.hatenablog.com/entry/2020/12/31/175419 https://note.com/hajime38/n/ne2650fdf4559