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

8220 ワード
Rails carrierwave 画像投稿機能 初心者 Ruby Ruby テキストリンク

目標

  • 画像投稿機能

開発環境

  • 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