Rails 使用 Paperclip 上传图片

Posted on |

Paperclip是 Rails 的一个上传图片插件，它和ImageMagick联合使用，可以很方便的实现图片上传并切割指定大小的功能，使整个图片上传过程非常简单。

项目引入 paperclip

1. 在Gemfile中

1
gem 'paperclip'

2. 在终端运行

1
bundle install

使用 paperclip

1. 在终端输入：

1
rails g paperclip image_news image

这样就会在原先的 image_news model中增加image属性，同时在app/db/migrate 文件夹下会新建xxxxxxx_add_attachment_image_to_image_news.rb类型的文件，内容如：

1
2
3
4
5
6
7
8
9
10
11
class AddAttachmentImageToImageNews < ActiveRecord::Migration  
  def self.up  
    change_table :image_news do |t|  
      t.attachment :image  
    end  
  end  

  def self.down  
    drop_attached_file :image_news, :image  
  end
end

2. 再对数据库迁移，终端输入：

1
rake db:migrate

如果你原先的image_news model 中没有其他属性，那么在schema.rb文件会如下：

1
2
3
4
5
6
7
8
9
10
ActiveRecord::Schema.define(version:xxxxxxx) do  
  create_table "image_news", force: true do |t|  
    t.datetime "created_at"  
    t.datetime "updated_at"  
    t.string   "image_file_name"  
    t.string   "image_content_type"  
    t.integer  "image_file_size"  
    t.datetime "image_updated_at"  
  end  
end

3. 修改 image_news.rb 文件：

1
2
3
4
5
6
7
8
9
10
class ImageNews < ActiveRecord::Base
  has_attached_file :image,
                    //:styles => { :small => "150x150>"},
                    :url  => '/images/:id/:style/:basename.:extension',
                    :path => ':rails_root/public/images/:id/:style/:basename.:extension'

  validates_attachment_presence :image
  validates_attachment_size :image, :less_than => 5.megabytes
  validates_attachment_content_type :image, :content_type => %w(image/jpeg image/png)
end

对于上述代码，要使用:styles就必须要确认是否有装imageMagick，如果没装就会报错。
还有:path :rails_root/public后面的拼接的路径必须和:url相同，就像上述代码中的images/:style/:basename.:extension
相关配置介绍：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
:rails_root
    The path to the Rails application.（当前Rails程序的路径，等同于RAILS_PATH的值。）
:rails_env
    The current environment (e.g. development, production)（当前运行环境，如：development，production）
:class
    The class name of the model that the attachment is part of, underscored and pluralised for your convenience.（文件拥有者的类名的复数形式，多个单词间以下划线连接。）
:basename
    The name of the originally uploaded file without its extension.（上传的文件原始的名字，不带扩展名。）
:extension
    The file extension of the originally uploaded file.（上传的文件的扩展名）
:id
    The ID of the model that the attachment is part of.（文件拥有者的id）
:id_partition
    The same as :id but formatted as a string using ID partitioning.（和:id一样，但结果是用ID partitioning格式化过的。）
:attachment
    The name of the attachment attribute (defined in the call to has_attached_file) downcased and pluralised for your enjoyment.（文件作为拥有者的属性的属性名，也就是跟在has_attached_file后面的那个名字，小写、复数形式。）
:style
    The current style of the attachment file being processed (e.g. in the ‘discarding an uploaded image‘ example above the :style would be one of ‘original’ or ‘small’) （文件被以某种样式处理的样式名，该选项用于图片处理。）

4. 在controller（controllers/image_upload_controller.rb）里写上：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
class ImageUploadController < ApplicationController

  def image_upload_view
    @image_news = ImageNews.new
  end

  def upload
    @image_news = ImageNews.new
    @image_news.image = params[:image_news][:image]
    @image_news.save
    redirect_to(:action => 'image_show_view', :id => @image_news.id)
  end

  def image_show_view
    @image_news = ImageNews.find(params[:id])
  end

end

5. 在view(views/image_upload_view.html.erb)写上：

1
2
3
4
5
6
7
<div style="background: #F5F5F5; width: 659px; padding: 50px; margin: 100px auto auto auto">
  <%= form_for @image_news, :url =>{:action => 'upload'}, :html => {:multipart => true} do |f|  %>
      <p>请选择图片：</p>
      <%= f.file_field :image%>
      <%= f.submit '上传' %>
  <% end %>
</div>

6. 在view/image_show_view.html.erb写上：

1
2
3
<div style="margin: 100px 80px 100px 500px">
 <%= image_tag @image_news.image.url%>
</div>

7. 安装ImageMagick (Mac OS X 10.8.5) 安装很成功、方便，不过得最先装xcode。

1
2
3
4
5
6
curl -O ftp://ftp.imagemagick.org/pub/ImageMagick/ImageMagick.tar.gz
tar -zxf ImageMagick.tar.gz
cd ImageMagick-*/
./configure --prefix=/opt/local
make
sudo make install