CarrierwaveとMiniMagickを使った画像アップロード機能

Carrierwaveとは

ファイルアップロード用のgem

MiniMagickとは

画像加工をしてくれるgem
・画像サイズ変更
・画像反転
・画像回転
・画像フォーマット変換
・色調整
・グラデーション

導入方法

1.gem導入

Gemfile

gem 'carrierwave'
gem 'mini_magick'

2.アップローダークラス作成

rails g uploader image(アップローダー名)

3.マイグレーションファイル作成とカラム追加

もし紐づけるマイグレーションファイルを作成していない場合、作成する

rails g migration add_image_to_posts image:string
rails db:migrate

4.モデル編集

画像を保存するmodelにアップローダーを紐づける
postのdbにはファイル名だけが保存される。

post.rb

# 追記
class Post < ApplicationRecord
  mount_uploader :image(カラム名), imageUploader(アップローダークラス名)
end

5.コントローラー編集

もしコントローラーにストロングパラメーターを追記していない場合、追記する

posts_controller.rb

def post_params
    params.require(:post).permit(:image)
end

6.アップローダークラス変更

6.1. minimagickの設定

MiniMagickのコメントアウトを外す

app/uploaders/Image_uploader.rb

class ImageUploader < CarrierWave::Uploader::Base  
  # Include RMagick or MiniMagick support:
  # include CarrierWave::RMagick
   include CarrierWave::MiniMagick

6.2.ローカル・クラウドの設定

ローカルに保存する場合は、storage: file、クラウド保存の場合は、storage :fogのコメントを外す

app/uploaders/Image_uploader.rb

  # Choose what kind of storage to use for this uploader:
  storage :file
  # storage :fog

6.3.保存先の設定

デフォルトでは、public/uploads/モデル名/カラム名/idに保存される。

app/uploaders/Image_uploader.rb

 # Override the directory where uploaded files will be stored.
  # This is a sensible default for uploaders that are meant to be mounted:
  def store_dir
    "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
  end

6.4.保存サイズとアスペクト比の設定

resizeに書き換える

app/uploaders/Image_uploader.rb

  # Process files as they are uploaded:
  process resize_to_fit: [200, 200]

この場合はアスペクト比を保ったまま横200px縦200pxの大きさに収まるよう画像保存。
第一引数が横サイズ、第二引数が縦サイズの指定。

6.5.サムネイルの設定

versionの数だけuplode先のdirectoryに"version名+画像ファイル名"で画像が保存されます。
以下の場合、画像ファイル名とpost_画像ファイル名が保存されます。

app/uploaders/Image_uploader.rb

  # Create different versions of your uploaded files:
  version :post do
    process resize_to_fit: [200, 200]
  end

6.6.拡張子の許可設定

app/uploaders/Image_uploader.rb

  def extension_whitelist    
     %w(jpg jpeg gif png)
  end

コメントアウトを外す

7.gitへのアップロードを除外

.gitignore

  /public/uploads

8.curlコマンドで確認x

modelのアソシエーションやvalidationを一時的にコメントアウトする x

post.rb

class Post < ApplicationRecord
  mount_uploader :image, ImageUploader   # 複数画像をデータベースに配列で保存する場合、mount_uploadersにする。
                                         #　 複数画像であってもデータベースをカラム毎に分割して保存する場合はsをつけない。
  validates :image, presence: true
  # belongs_to :user
  # belongs_to :park
  # has_many :insect_post
end

$ cd 〇〇〇  //画像ファイルがあるディレクトリへ移動する
$ curl -F "image=@test.png" http://localhost:3001/api/v1/posts
$ curl -X GET http://localhost:3001/api/v1/posts

GETできることを確認する

[{"id":1,"image":{"url":"/uploads/post/image/1/test.png","post":{"url":"/uploads/post/image/1/post_test.png"}},"created_at":"2022-12-25T10:08:44.777Z","updated_at":"2022-12-25T10:08:44.777Z"}]%

参考

https://qiita.com/mattan5271/items/a0ff8ab9a830d2cfcc7e
https://qiita.com/wann/items/c6d4c3f17b97bb33936f
https://qiita.com/wonder_boooy/items/1510f8750d1282693148
https://zenn.dev/yukihaga/articles/e63a224431bc96
https://pg-happy.jp/carrierwave-rmagic-uploader.html