上载图像:设定一览

上载图像

Coffeecup header7

0 : 这个章的目的

 看看「上载图像」的设定一览


1 : 设定一览

上载图像」裡使用「Paperclip」的gem,上载图像。

在这个章做了,
  • 导入「Paperclip」
  • 追加资料库的框子
  • 图像的资料操作
  • 网页上显示图像
这个三个设定。

 首先从「Paperclip」的导入开始


在terminal打入

 terminal
 使用Windows的话,用「命令提示符」。
1 brew install imagemagick

之后安装使用「Paperclip」的时候会需要的「imagemagick
※ 这样安装好了,以后不用安裝。

到这里之后,在Gemfile里追加內容

 Gemfile
※ 用半母字母数字打入。一起点击「Command」跟「s」可以保存內容。
 使用Windows的话,点击「ctrl」跟「s」可以保存內容。


32 gem "paperclip"

用terminal,做gem的导入。

 ターミナル
 使用Windows的话,用「命令提示符」。
1 bundle install

 接着做框子的设定



首先在terminal打入下面的打入,作编辑资料库的设定文件。

 terminal
 使用Windows的话,用「命令提示符」。
1 rails g paperclip user image

这样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
 使用Windows的话,用「命令提示符」。
1 rake db:migrate

到这里 Sequel pro images 追加了像上面图像一样的框子吧。

 那麽做做看资料操作吧!



資料操作在
  • 「app > controllers > users_controller.rb」
  • 「app > models > user.rb」
这个两个文件里设定。

 users_controller.rb(编辑第31行)
※ 用半母字母数字打入。一起点击「Command」跟「s」可以保存內容。
 使用Windows的话,点击「ctrl」跟「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

 user.rb(追加第10〜12行)
※ 用半母字母数字打入。一起点击「Command」跟「s」可以保存內容。
 使用Windows的话,点击「ctrl」跟「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

 最后做网页的显示吧



网页显示要在
  • 「app > views > users > edit.html.erb」
  • Chrome messages users 1 edit no image
  • 「app > views > users > show.html.erb」
  • Chrome messages users 1 after upload images
  • 「app > views > rooms > show.html.erb」
  • Chrome messages rooms 1 messages with images
这个三个网页里,追加画面的输入框・显示的內容。

 show.html.erb(「users」文件夾)
※ 用半母字母数字打入。一起点击「Command」跟「s」可以保存內容。
 使用Windows的话,点击「ctrl」跟「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> <!-- 省略 -->

 edit.html.erb(「users」文件夾)
※ 用半母字母数字打入。一起点击「Command」跟「s」可以保存內容。
 使用Windows的话,点击「ctrl」跟「s」可以保存內容。


1 2 3 4 5 6 7 8 9 10 11 12 13 ... <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> <!-- 省略 -->

 show.html.erb(「rooms」文件夾)
※ 用半母字母数字打入。一起点击「Command」跟「s」可以保存內容。
 使用Windows的话,点击「ctrl」跟「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 %> <!-- 省略 -->

 到这里设定好了「Paperclip」的內容了。