Edited at

画像アップロード機能の実装

More than 1 year has passed since last update.

Railsのマイグレーションファイルを利用して、ウェブサービスに画像をアップロードする機能の実装を習いました。忘れないようにまとめておこうと思います。


usersテーブルにimage_nameカラムを追加

※今回は事前に作成したマイグレーションファイル(テーブル)があるので、そこにカラムを追加する

1.マイグレーションファイルのみを作成

rails g migrate add_image_name_to_users

2.作成したマイグレーションファイルに、カラムを追加するメソッドを記述

def change

add_column :users, :image_name, :string
#:テーブル名, :カラム名, :データ型
end

3.マイグレーションファイルを実行し、データベースに変更を反映

rails db:migrate


ビューに画像を表示させる

<img src="<%= "/user_images/#{@user.image_name}" %>">


画像を送信できるようにする

1.画像の選択ボタンを設置(フォーム)

<h2>画像</h2>

<input name="image" type="file" >

2.画像の送信

<%= form_tag("/users/update", {multipart:true}) do %>

  <h2>画像</h2>
  <input name="image" type="file" >
<% end %>
<!-- 画像データを送信したいときには{multipart: true}をつける必要がある -->


送信された画像を保存する

1.ファイル名をデータベースに保存

def update

#ユーザーの情報を宣言
@user = User.find_by(id: params[:id])

#ファイル名(ユーザーのid.jpg)をデータベースのimage_nameカラムに保存
@user.image_name = "#{@user.id}.jpg"
end

2.フォルダに画像を受け取り、保存する

def update

.
.
@user.image_name = "#{@user.id}.jpg"

#送信された画像データを受け取る
image = params[:image]

#受け取った画像データを保存(画像データを元に画像ファイルを作成)する
File.binwrite("public/user_images/#{@user.image_name}", image.read)

#画像ファイル生成のためにFileクラス.binwriteメソッドを使用
#ファイルの場所,ファイルの中身(readメソッドを使うことで画像データを取得)
end