7 : 上载图像

上章 : 作聊天室:总结

Coffeecup header7

0 : 这个章的目的

 到上章,作了聊天室。

在这个章,会员资料上显示图像吧。


 使用Windows的话,不能学习这里的內容。

 請看下章吧。



 解释在这里做的网页吧!

 首先在打入编辑的会员资料的users」资料库的「edit」网页Chrome messages users 1 edit no image 像上面图像一样,作 选择文件的输入框。

选择文件之后,点击 登录 会显示 Chrome messages users 1 edit upload image 像上面图像一样上载的图像。

在这里上载的图像,可以从別的网页上看。 Chrome messages users 1 after upload images Chrome messages rooms 1 messages with images
  在这里使用「paperclip」的「gem」,上载图像。

那么做做看吧!

 图像是用河出書房新社的『Tonio Kröger』(トーマス・マン,翻譯 平野卿子)的封面。谢谢!


1 : 导入Paperclip

首先导入「Paperclip」吧!
导入Paperclip之前,
为了使用这个,安装imageMagick的环境。

在terminal上打入下面的內容吧

 terminal
1 brew install imagemagick

这样导入imageMagick了!
※ 这样安装好了,以后不用打入这个命令了
那么,安装Paperclip吧!

打开Sublime Text之后,编辑Gemfile的內容吧。
※ 使用Sublime Text打开文件的方法请参考这里

 Gemfile
※ 用半母字母数字打入。一起点击「Command」跟「s」可以保存內容。
32 gem 'paperclip'

大概在第32行,追加內容。
编辑好了之后,导入设定的內容。在terminal上打入下面的命令吧。

 terminal
1 bundle install

 不动的话,删除「Gemfile.lock」之后再试试看吧。

  这样「Paperclip」的导入好了!

使用这个「Paperclip」,上载图像吧!


2 : 上载图像

使用「Paperclip」,上载图像吧!

 ① : 上载图像是怎么做呢?


使用Paperclip上载图像是要怎么做呢?

 在这里再看看网站上的动作吧。

  首先打开「users」资料库的「edit」网页, Chrome messages users 1 edit no image 打开图像的输入框选择图像, Chrome messages users 1 edit select images 点击 登录 之后, Chrome messages users 1 edit upload image 会上面图像会显示。
 那么,图像是在哪里保存呢?

这些图像在public > system里保存。 Sublime text public system images 网页上显示,在这里保存的图像。
 接着解释,显示保存的图像的方法。

为了用会员资料显示图像,在users」资料库里追加保存图像的名字的框子

users
image_file_name image_content_type image_file_size image_updated_at
sample.jpg image/jpeg 164788 2016-04-25 04:45:48
使用这样的框子,显示图像。

 例如说,「id」是「1」的会员的话, Sublime text public system 图像会保存在public > system > users > images > 000 > 000 > 001 > medium > 图像的名字里面。

上面的图像的名字里放追加的「image_file_name」的框子的內容,显示图像。

 途中有「medium」的文件夾,这个是设定图像的大小

图像的大小,在这里设定
  • original(原來的大小)
  • medium(中)
  • thumb(小)
这个三个,在各个文件夾里保存图像文件。

 那么用用看「Paperclip」吧!


 ② : 使用「Paperclip」


在这里,使用Paperclip上载图像。
Paperclip设定的內容是
  • 资料库里追加框子
  • users
    image_file_name image_content_type image_file_size image_updated_at
    sample.jpg image/jpeg 164788 2016-04-25 04:45:48
  • 资料操作的设定
  • 为了保存图像,编辑上面的资料的框子。

  • 網頁顯示的設定
  • 设定网页上显示图像的內容。

这个三个。

 那么做做看吧!

 ⑴ : 编辑资料库


 首先在资料库里追加图像的框子吧。

为了追加设定图像的框子,在terminal上打入

 terminal
1 rails g paperclip user image

的命令。
这样作好了,users」资料库里追加「image」的框子的设定文件「日子_add_attachment_image_to_users.rb
※ 「image」的框子,可以使用「photo」这样子自己喜欢的名字。
看看作好的設定文件吧。
打开db > migrate > 日子_add_attachment_image_to_users.rb,看看內容吧!

 日子_add_attachment_image_to_users.rb
1 2 3 4 5 6 7 8 9 10 11 class AddAttachmentImageToUsers < ActiveRecord::Migration def self.up change_table :users do |t| t.attachment :image end end def self.down remove_attachment :users, :image end end

为了适用这个设定,在terminal上打入

 terminal
1 rake db:migrate

这个命令吧!
 不动的话,在前面追加「bundle exec」,打入「bundle exec rake ...」吧。

这样,资料库的设定好了!
Sequel Pro看看资料库有沒有作好!
※ 打开Sequel Pro的方法,请参考这里

「created_at」「updated_at」的后面,
有沒有追加image」的框子吗? Sequel pro images


 ⑵ : 资料操作


 接着做资料操作吧。

资料操作有
  • 可以编辑「image」的设定(users_controller.rb)
  • 「image」的大小,文件的种类的设定(user.rb)
这个两个设定。

 首先从「users_controller.rb」的编辑开始做吧。

图像的上载使用,在users」资料库的「edit」网页里选择的图像 Chrome messages users 1 edit no imageupdate」网页上载。
在这里设定,update」网页里允许编辑「image」资料的內容。

打开app > controllers > users_controller.rb,编辑里面的內容吧!

 users_controller.rb(编辑第31行)
※ 用半母字母数字打入。一起点击「Command」跟「s」可以保存內容。
28 29 30 31 32 33 34 35 36 37 38 def update @user = User.find(params[:id]) if @user.id == current_user.id @user.update(params.require(:user).permit(:first_name, :family_name, :self_introduction, :age, :image)) redirect_to "/users/#{@user.id}/edit" flash[:notice] = "编辑好了" else redirect_to "/" flash[:alert] = "无效的会员" end end

在第31行的后面

1 permit( ... , :age, :image)

这样设定,允许image的编辑。
 接着在「user.rb」追加设定。

为了使用「Paperclip」,在user.rb上设定
  • 图像的大小的设定
  • 图像的文件的种类的设定
这个两个设定。

 那么,从第一个「图像的大小的设定」开始做吧。

Paperclip里使用px,设定要上载的图像的大小。

在这里设定
  • 上下300/左右300
  • 上下50/左右50
这个两个大小。

那么编辑app > models > user.rb的內容吧!

 user.rb(追加第10行)
※ 用半母字母数字打入。一起点击「Command」跟「s」可以保存內容。
1 2 3 4 5 6 7 8 9 10 11 12 class User < ActiveRecord::Base # Include default devise modules. Others available are: # :confirmable, :lockable, :timeoutable and :omniauthable devise :database_authenticatable, :registerable, :recoverable, :rememberable, :trackable, :validatable has_many :messages has_many :entries has_attached_file :image, styles: { medium: "300x300>", thumb: "50x50>" } end

这样设定好了,保存300x300」「50x50的大小的图像的內容了。
 接着做第2个「图像的文件的种类的设定」吧。

在这里设定,保存的文件的种类。

例如说,想要保存图像的时候,不能保存播放音乐的mp4」文件吧。

在这里设定,只让
  • jpg
  • jpeg
  • png
  • gif
这个四个文件保存。

那么打开app > models > user.rb,编辑里面的內容吧!

 user.rb(追加第12行)
※ 用半母字母数字打入。一起点击「Command」跟「s」可以保存內容。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 class User < ActiveRecord::Base # Include default devise modules. Others available are: # :confirmable, :lockable, :timeoutable and :omniauthable devise :database_authenticatable, :registerable, :recoverable, :rememberable, :trackable, :validatable has_many :messages has_many :entries has_attached_file :image, styles: { medium: "300x300>", thumb: "50x50>" } validates_attachment :image, content_type: { content_type: ["image/jpg", "image/jpeg", "image/png", "image/gif"] } end

这样设定了,不让jpg」「jpeg」「png」「gif以外的文件保存的设定。

  这样设定了资料操作的內容了。


 ⑶ : 显示网页


 接着做网页显示吧!

网页显示要做
  • 设定输入框
  • Chrome messages users 1 edit no images no message
  • 显示图像

  •  显示大小「medium」的图像(300x300)の表示 Chrome messages users 1 after upload images  显示大小「thumb」的图像(50x50) Chrome messages rooms 1 messages with images
有这个两个设定。

 首先设定输入框的设定吧。

编辑会员资料的网页users」资料库的「edit」网页里,追加文件的输入框的设定。 那么编辑app > views > users > edit.html.erb的內容吧!

 edit.html.erb(追加第4〜6行)
※ 用半母字母数字打入。一起点击「Command」跟「s」可以保存內容。
1 2 3 4 5 6 7 ... <h1>编辑会员资料</h1> <hr> <%= form_for @user do |f| %> <p>头像</p> <%= f.file_field :image, :class => "form-control my-form" %> <br> <p>姓字</p> <!-- 省略 -->

这样设定好了文件的输入框了。

像这样,文件的输入框要

6 <%= f.file_field :image, :class => "form-control my-form" %>

像上面的图像一樣使用「file_field」设定。
在这里也是用form-control,装饰输入框。
 输入框的设定跟资料操作完成了,在这里保存看图像吧!

首先登入会员之后,移动到会员的资料的网页吧!
※ 一起点击「Command」跟「c」停止,用rails s打开的服务器之后,再打入「rails s」吧。 Chrome messages users 1 edit no images no message 有沒有显示这样子的画面吗?
网页显示之后,在图像的输入框里选择图像, Chrome messages users 1 edit select images 点击 登录 吧!

這樣圖像保存好了,
看看在public > system里面有沒有保存资料! Sublime text public system images 看看Sequel Pro,资料有沒有保存了沒! Sequel pro images user 1
 接着显示图像吧。

 首先显示medium」(上下300左右300)的图像。显示的网页是
  • users」资料库的「show」网页
  • Chrome messages users 1 after upload images
  • users」资料库的「edit」网页
  • Chrome messages users 1 edit upload image
这个两个网页!
那么,先编辑app > views > users > show.html.erb的內容吧。

 show.html.erb(追加第5、6行)
※ 用半母字母数字打入。一起点击「Command」跟「s」可以保存內容。
1 2 3 4 5 6 7 8 9 10 ... <div class="row"> <div class="col-xs-6"> <h1>会员资料</h1> <hr> <%= image_tag @user.image.url(:medium) %> <br><br> <p>名字:<%= @user.family_name %><%= @user.first_name %>(<%= @user.age %>岁)</p> <p>自我介绍:<%= @user.self_introduction %></p> <br> <% if @user.id == current_user.id %> <!-- 省略 -->

里面的

6 <%= image_tag @user.image.url(:medium) %>

在显示图像。

@user选择会员资料,
显示大小「medium」的「image的会员的图像。
※ 后面追加两个「<br>」,在图像跟名字之间作空格 Chrome messages users 1 after upload images
同样的在users」资料库的「edit」网页显示图像吧。

编辑app > views > users > edit.html.erb的內容吧!

 edit.html.erb(追加第5、6行)
※ 用半母字母数字打入。一起点击「Command」跟「s」可以保存內容。
1 2 3 4 5 6 7 8 9 10 <h1>编辑会员资料</h1> <hr> <%= form_for @user do |f| %> <p>头像</p> <%= image_tag @user.image.url(:medium) %> <br><br> <%= f.file_field :image, :class => "form-control my-form" %> <br> <p>姓字</p> <!-- 省略 -->

在第5行的设定,在显示图像。 Chrome messages users 1 edit upload image
 接着显示thumb」(上下50左右50)的图像吧。显示的网页是,
  • rooms」资料库的「show」网页
  • Chrome messages rooms 1 messages with images
这个网页。

thumb的大小的图像是

1 <%= image_tag @user.image.url(:thumb) %>

这样设定显示的內容。
那么编辑app > views > rooms > show.html.erb的內容吧!

 show.html.erb(编辑第22、30行)
※ 用半母字母数字打入。一起点击「Command」跟「s」可以保存內容。
14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 ... <div class="col-xs-9"> <% if @messages.present? %> <% @messages.each do |m| %> <% if m.user_id == current_user.id %> <h4 class="text-right"> <p class="alert alert-success"> <%= m.content %> <br><br> <small><strong><a href="/users/<%= m.user_id %>"><%= m.user.family_name %> <%= m.user.first_name %> <%= image_tag m.user.image.url(:thumb) %></a></strong></small> </p> </h4> <% else %> <h4 class="text-left"> <p class="alert alert-info"> <%= m.content %> <br><br> <small><strong><a href="/users/<%= m.user_id %>"><%= image_tag m.user.image.url(:thumb) %> <%= m.user.family_name %> <%= m.user.first_name %></a></strong></small> </p> </h4> <% end %> <% end %> <% else %> <!-- 省略 -->

在第22、30行的显示名字的部分的前面/后面,设定

1 <%= image_tag m.user.image.url(:thumb) %>

这个內容,显示会员的头像。
※ 使用m.user,选择messages」资料在拿的会员。 Chrome messages rooms 1 messages with images  这样显示图像了!


 ③ : 总结


总结,使用Paperclip的方法。
  • 追加资料库

  • 为了追加资料库的框子,作设定文件。

     terminal
    1 rails g paperclip user image

    这一次的打入是,users」资料库里追加「image」的框子的命令。

    在这个打入作了「日子_add_attachment_image_to_users.rb」的文件。

    做好之后,使用文件的內容。

     terminal
    1 rake db:migrate

  • 资料操作

  • 要做资料操作的时候要在,
    • users_controller.rb
    • user.rb
    这个两个文件里追加设定。

     users_controller.rb
    1 @user.update(params.require(:user).permit(:first_name, :family_name, :self_introduction, :age, :image))

     user.rb
    1 2 has_attached_file :image, styles: { medium: "300x300>", thumb: "50x50>" } validates_attachment :image, content_type: { content_type: ["image/jpg", "image/jpeg", "image/png", "image/gif"] }

  • 网页显示

  • 网页显示的设定要做
    • 显示输入框
    • 显示图像
    这个两个设定。

     显示输入款

    1 <%= f.file_field :image, :class => "form-control my-form" %>

     显示图像

    1 <%= image_tag @user.image.url(:medium) %>

  使用「Paperclip」的图像的显示,到这里。

接着使用条件判別,沒有图像的会员的话, Chrome messages users 2 no image Chrome messages users 1 edit no image 像上面图像一样显示
沒有头像」「头像还沒登录」的文字吧!


3 : 图像的判别

使用条件判別,设定图像的显示吧!
要判别会员资料里有沒有图像的条件,要使用present?」跟「if/else」
※ 详细请参考这里

所以在这里,大概设定下面的內容。

1 2 3 4 5 <% if @user.image.present? %> <%= image_tag @user.image.url(:medium) %> <% else %> <h4>沒有图像</h4> <% end %>

那么在
  • users」资料库的「show」网页
  • Chrome messages users 2 no image
  • users」资料库的「edit」网页
  • Chrome messages users 1 edit no image
这个两个网页上设定內容。

 首先在「users」资料库的「show」网页追加设定。

编辑app > views > users > show.html.erb的內容。

 show.html.erb(追加第5、8〜10行)
※ 用半母字母数字打入。一起点击「Command」跟「s」可以保存內容。
1 2 3 4 5 6 7 8 9 10 11 12 ... <div class="row"> <div class="col-xs-6"> <h1>会员资料</h1> <hr> <% if @user.image.present? %> <%= image_tag @user.image.url(:medium) %> <br><br> <% else %> <h4>沒有头像</h4> <% end %> <p>名字:<%= @user.family_name %><%= @user.first_name %>(<%= @user.age %>岁)</p> <p>自我介绍:<%= @user.self_introduction %></p> <!-- 省略 -->

这样设定判別「@user」的「image」有沒有的条件判別了。
 接着在「users」资料库的「edit」网页上追加设定。

编辑app > views > users > edit.html.erb的內容。

 edit.html.erb(追加第5、8〜10行)
※ 用半母字母数字打入。一起点击「Command」跟「s」可以保存內容。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 <h1>编辑会员资料</h1> <hr> <%= form_for @user do |f| %> <p>头像</p> <% if @user.image.present? %> <%= image_tag @user.image.url(:medium) %> <br><br> <% else %> <h4>头像还沒登录</h4> <% end %> <%= f.file_field :image, :class => "form-control my-form" %> <br> <p>姓字</p> <!-- 省略 -->

到这里条件判別的设定好了。

 使用「Paperclip」的设定到这里。

设定的內容请参考这里

 公开网站的方法,可以从这里学习。参考吧。


 到这里「应用编」的內容完了。辛苦你了。

为了还想学习「Ruby on Rails」的人,介绍可以学习的网站,有兴趣的话请参考。