Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
15
Help us understand the problem. What is going on with this article?
@jonnyjonnyj1397

railsのキホンvol.7(プロフィール画像表示)

More than 1 year has passed since last update.

プロフィール画像の表示

マイグレーションファイルの作成

$ rails g model User image_name:string

とすると、モデルも作成されてしまうので、
rails g migrationコマンドを使う。

$rails g migration add_image_name_to_users

これによりマイグレーションファイルだけが作成される。

変更内容を保存する

テーブルに反映させるためにはマイグレーションファイルの中のchangeメソッドの中で変更内容を記述する。

20190317121347_add_image_name_to_users.rb
def change
  add_column :users,:image_name,:string
end

変更内容を記述したら、migrateコマンドを打つ。

$ rails db:migrate

これにより、データベースに変更内容が保存される。

フォームより、画像情報を送信する

フォームの画像の情報をデータベースに送るには以下のようなソースになる。
form_tagメソッドには{multipart: true}、
ファイルを添付するには、が必要となる。

edit.html.erb
<%= form_tag("/users/#{@user.id}/update", {multipart: true}) do %>
          <p>ユーザー名</p>
          <input name="name" value="<%= @user.name %>">
          <p>画像</p>
          <input name="image" type="file">
          <p>メールアドレス</p>
          <input name="email" value="<%= @user.email %>">
          <input type="submit" value="保存">
  <% end %>

ファイル名をデータベースに保存する

File.binwriteによりフォームから送信された画像の情報をpublic/user_imagesフォルダ配下に保存する。
以下のソースでは、imageの情報を読み取っている。

users_controller.rb
def update
  @user = User.find_by(id: params[:id])
  #画像データが送信された場合
  if params[:image]
    #データベースに保存するファイル名はユーザーのid.jpgとする
    @user.image_name = "#{@user.id}.jpg"
    image = params[:image]
    File.binwrite("public/user_images/#{@user.image_name}",image.read)
  end
end

画像の表示

ビューに画像を表示するには、タグを使う。
ruby部分のコードは<%=%>で囲み、画像のソースの最初には"/"が必要となる。

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

続き
https://qiita.com/jonnyjonnyj1397/items/4691d723860a8d927d15

15
Help us understand the problem. What is going on with this article?
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

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
15
Help us understand the problem. What is going on with this article?