LoginSignup
1
1

More than 5 years have passed since last update.

画像のアップの方法(メモ)

Posted at

今回は画像アップの仕方について、書いていきます。
ほぼrails tutorialまんまですので、気になった方は下記を見ましょう。
https://railstutorial.jp/chapters/user_microposts?version=5.1#sec-micropost_images

全体の流れ

1.Gemの導入 (gem 'carrierwave')
2.uploaderの作成
3.Modelにおける :pictureプロパティの作成
4.uplaoderとModelの紐付け (mount_uploaderメソッド)
5.form作成 (file_field)
6.表示方法 (image_tagヘルパー)

全体の流れは以上です。簡単ですね。

では見ていきます。
1.Gemの導入

Gemfile
gem 'carrierwave',             '1.2.2'
gem 'mini_magick',             '4.7.0'

group :production do
  gem 'fog', '1.42'

基本はcarrierwaveだけで良いのですが、validationやresizeなどをしたい方は残り2つもインストールしておきましょう。便利です。(今回では触れませんが)
bundle installしちゃってください。

2.uploaderの作成

rails g uploader Picture

これでUploaderが作成されます。
app/uploaders/picture_uploader.rbというやつです。

3.Modelにおける :pictureプロパティの作成
これは知っていると思います。

今回はPostモデルにpicure属性を追加します。

rails generate migration add_picture_to_posts picture:string

上記でmigrationファイルを作成。add_"属性名"to"モデル"s で覚えましょう。

rails db:migrateしちゃってください。

4.uploaderとModelの紐付け (mount_uploaderメソッド)

post.rb
mount_uploader :picture, PictureUploader

モデルに上記を追加して両者を紐付けます。
ここでseverの再起動をしないとエラーが起きる時があります。

5.form作成 (file_field)

これは普通ですね。省略します。
<%= f.file_field :picture %>

これでfile_fieldが表れます。そして,:pictureに格納されます。

6.表示方法 (image_tagヘルパー)

Controllerでformからデータを受け取り、DBに保存した後の表示方法。
これはimage_tagヘルパーを使います。

<%= image_tag post.picture.url %>

これでOKです。
image_tag(画像ファイルへのパス, [, (オプション or HTMLオプション)])

<%= image_tag post.picture.url if post.picture %>
こうした方が少し親切ですね。

以上で終わりです。
ありがとうございました。

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1