takumiのエンジニア技術ブログ

takumiのエンジニア技術ブログ

未経験からエンジニアを目指しています!技術定着の為にこのブログにアウトプットしていきます!気軽にコメント等いただけるとありがたいです!

CarrierWaveを使用した画像をアップロードする方法

f:id:golikyua:20191107184855j:plain

CarrierWaveを使用して画像投稿機能を実装したのでアウトプットします。

 

前提

ruby 2.6.3

Rails 5.0.7.2

開発環境 AWS cloud9

 

やること

・データベースに画像保存用のカラムを作成

・gem 'carrierwave'のインストール

・画像をアップロードするためのコードを作成

・config/application.rbで設定変更

・モデルに関連付ける

 

 

・データベースに画像保存用のカラムを作成

$ rails g model Topic user_id:integer description:string image:string

モデルを作成してimageカラムに「画像がどこにあるか」という情報を持たせる。

 

$ rails db:migrate

maigrationファイルをデータベースに反映させる

 

 

 

・gem 'carrierwave'のインストール

 

Gemfile

gem 'carrierwave'

Gemfileに上のgemを書いてbundle install

 

 

 

・画像をアップロードするためのコードを作成

 

コンソールで以下のコマンドを入力

$ rails g uploader image

このコマンドで app/uploaders/image_uploader.rb が作成される。

 

 

・config/application.rbで設定変更

class Application < Rails::Application
  config.autoload_paths += Dir[Rails.root.join('app', 'uploaders')]
end

 

・モデルに関連付ける

app/models/topics.rb

class Topic < ApplicationRecord
  mount_uploader :image, ImageUploader
end

これでcarrierwaveの設定は完了。

 

 

☆画像タイプの制限と画像サイズの制限についても学んだので書いておく

 

画像タイプの制限、画像サイズの制限共に以下のコマンドで作成された app/uploaders/imageuploader.rbのコードを変更する

$ rails g uploader image

 

・画像タイプの制限

ファイル内のコードでコメントアウトされている以下の文のコメントアウトを解除する。

app/uploaders/imageuploader

def extension_whitelist
    %w(jpg jpeg gif png)
 end

 

・画像サイズの制限

今回は10MB以下の画像のみ使えるようにする。

これもファイル内に以下のメソッドを足すだけ

app/uploaders/imageuploader

def size_range
    1..10.megabytes
end