Help us understand the problem. What is going on with this article?

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

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
taccaya
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away