【Rails】carrierwave画像投稿機能 （メモ）

目標

• 画像投稿機能

開発環境

• Rails: 6.1.3
• ruby: 3.0.0
• mac: os

前提

• 投稿機能実装済み
• 投稿テーブルpost

実装

１．Gemfileにcarrierwaveを記述 してインストール

Gemfile

gem 'carrierwave'

bundle installします。

ターミナル

$bundle install

###２．postテーブルにimageカラム追加

ターミナル

$rails g migration AddImageToPosts image:string

マイグレーションファイルが生成されます。
imageカラムが追加されているのを確認してマイグレーションします。

class AddImageToPosts < ActiveRecord::Migration[6.1]
  def change
    add_column :posts, :image, :string
  end
end

ターミナル

$rails db:migrate 

3.イメージアップローダー作成

ターミナル

$rails g uploader image

image_uploader.rbファイルが生成される。

###４．モデル紐付け
postモデルにイメージアップローダーを紐付ける。

app/models/post.rb

class Post < ApplicationRecord
  mount_uploader :image, ImageUploader
end

###５.コントローラー記述

praivateのpost_paramsにimageを追加。

app/contrllers/posts_controller.erb

private

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

###6.ビュー記述
画像投稿フォーム追加。

app/views/posts/_form.html.erb

<%= form_with(model: @post)do |f| %>
    <div>
       <%= f.label :title, ' タイトル' %>
       <%= f.text_field :title %>
    </div>
    <div>
       <%= f.label :content, '内容' %>
       <%= f.text_field:content %>
    </div>
       <%= f.label :image, '画像' %>
       <%= f.file_field :image %> 
    <div>
       <%= f.submit '投稿'%>
    </div>
<% end %>

画像投稿フォームができました。

これだけでは投稿できないのでimage_tagを使って投稿できるように記述します。

app/views/posts/show.html.erb

<h5><画像投稿></h5>
<p>タイトル：<%= @post.title %></p>
<p><%= image_tag @post.image.url %></p>
<p>内容：<%= @post.content %></p>

記述したので投稿できるはずです。

こんな感じで無事投稿でできました。
以上です。

#参考
参考にした記事です。
https://qiita.com/k19911848/items/a082cc4e0c0103f935b1