Ruby on Rails 入門

未経験エンジニアがRuby on Railsを学習します

Ruby on RailsでCarrierWaveを使って画像投稿機能を実装する

【やりたいこと】

既存のwebアプリ(タスク管理アプリ)で画像を投稿できるようにしたい
( 既存で一通りのモデルとかビューはすでに作成済みの想定 )

【イメージ】

あまり湧いていないのですがcarrierwaveのgemを使用すると良いらしい。
既存でtitleの投稿機能は実装していたのでそれらに追加する形で実装します。

・gemをinstallする
・dbで画像を受け取れるようにする
・dbへ渡せるようモデルに追記する
・モデルへ渡すためのコントローラとビューを追加する
・dbから受け取った画像をビューで表示する画面を作る

 

【やってみる】

いつも通りvi GemfileでGemfileに追記、bundle installします。

gem 'carrierwave' 

bundle install 

これでcarrierwaveをインストール。
公式Githubに色々記載があります

rails g migraation AddpictureTotasks picture:string
#rails g migration Addカラム名(任意)Toテーブル名 カラム名:型

 rails db:migrate

これでdbのtaskテーブルに画像が追加できるようになりました。 

mysqlで叩いてみてもちゃんとpictureカラムが増えてる 

# mysqlにログインした後 

select * from tasks \G;

f:id:fresh_engineer:20170829001855p:plain

 こんな感じ。(投稿前はNILLになってるはず)

 

dbが用意できたのでdbへ渡すモデルを編集する

class Task < ActiveRecord::Base
mount_uploader :picture, PictureUploader
end

公式のGithubにもあった通りmount_uploaderというメソッドを使う。

 

画像をinputするためのviewを作成する。

<div class="field">
<%= f.label :picture %>
<%= f.file_field :picture %>
</div>

そのviewで受け取った画像をモデルへ渡すためにコントローラのparamにも
pictureを追加する

def task_params
params[:task].permit(:title, :picture)
end

これでcontrollerがpictureも渡してくれるようになりました

最後に受け取った画像を表示できるようviewを編集して終わり

<%= image_tag(@task.picture_url) if @task.picture.present? %>

以上で
画像をアップロード(view)→コントローラが受け取る→モデルが受け取る→dbへ渡す
リクエスト→dbから画像データを取ってくる→viewで表示する 

の完了です。