一種在ruby on rails中圖片上傳與處理的方法

摘要：以SNS、BLOG等為代表的web2.0應用中，經常需要上傳圖片，而且要對圖片進行縮放處理，得到縮略圖。使用ruby on rails開發框架，通過attachment_Fu插件可以方便地實現所有這些功能。這大大提高了web應用的開發效率，符合用戶對web2.0應用持續開發、持續改進、持續創新的要求。

關鍵詞：ruby； rails；attachment_fu；ImageScience；web2.0

中圖分類號：TP311文獻標識碼：A文章編號：1009-3044(2011)04-0834-03

A Method of Image Upload and Processing on Ruby on Rails

CAO Zhen-zhong

(Institute of Computer Science， Qufu Normal University， Qufu 273165， China)

Abstract: The web2.0 applications(represented by SNS， BLOG etc.) often need to upload and handle pictures to get thumbnails. Using ruby on rails development framework， through attachment_fu plug-in can easily achieved all of these functions. This greatly improves the efficiency of web application development， meet user requirements to web2.0 application of continues develop， continuous improvement， continuous innovation.

Key words: ruby; rails; attachment_fu; ImageScience; web2.0

Ruby on Rails是一套web開發框架，它使用Ruby語言編寫。Ruby語言以自然、簡潔、快速著稱，全面支持面向對象程序設計。Rails是一套獨特的MVC開發架構，采取模型（Model）、視圖（View）、控制器（Controller）分離的開發方式，不但減少了開發中的問題，更簡化了許多繁復的動作。雖然在Rails出現之前，已經有了很多符合MVC規范的開發框架，比如Structs、Spring等等。但是Rails開發框架非常適合敏捷開發，其設計原則中的“不要重復自己”（Don't Repeat Yourself）和“約定勝于配置”（Convention Over Configuration）都深刻地體現了這一點。

Ruby on Rails的模型-視圖-控制器架構由以下各部分組成：

1）模型（Model）。模型包含著應用的狀態，通常是由一些關系數據庫中的表組成的。在Ruby on Rails中，一般來說，程序員要做的就是繼承ActiveRecord類，程序會自動計算出要使用哪個RDBMS表，這個表有哪些列。表與表之間的關系通過簡單的命令來指明。

2）控制器（Controller）。控制器將用戶界面和模型關聯起來，并充當協調運作的角色。它接收各種用戶操作，更新模型，并用合適的視圖（view）展示結果給用戶。

3）視圖（View）。視圖負責根據模型中的數據顯示。作為 web 應用，Rails 里的View通常是整個或者部分頁面，當然也可以是XML甚至是JavaScript代碼。

1 web應用中圖片上傳需求分析

越來越多的web應用需要提供圖片上傳功能。比如在SNS類應用中，用戶可以上傳頭像、簽名，還可以自主管理包含大量圖片的相冊。除此之外，這類web應用中還可能需要對圖片進行處理的功能，比如用戶上傳的頭像或者照片，在不同的頁面上可能需要不同的大小，有預覽圖和實際圖等。有的應用可能還允許用戶對圖片進行更加特殊的處理，比如模糊、銳化等等。

一般的web應用主要通過文件系統或者數據庫來存儲上傳的圖片文件，通過Form表單中的file標簽來實現圖片文件上傳。在Ruby on Rails應用中，當然也可以這樣來實現。不過，通過attachment_fu插件可以更加簡便地實現以上這些功能。

2 attachment_fu插件的安裝與使用

attachment_fu插件繼承自acts_as_attachment，后者本來是集成在Ruby on Rails框架中的，后來以插件的方式提供。

2.1 attachment_fu插件及其依賴庫的安裝

2.1.1 安裝圖形處理庫

如果僅僅需要改變圖片的大小，安裝FreeImage圖形處理庫和ImageScience就可以，如果需要更加復雜的處理，需要安裝ImageMagick圖形處理庫和RMagick。我們只介紹前者的安裝。在ubuntu server8.04中，通過以下兩個命令即可完成：

sudo apt-get install libfreeimage-dev

sudo gem install -y image_science

2.1.2 安裝attachment_fu插件

在Rails應用目錄下面運行如下命令：

script/plugin install http://svn.techno-weenie.net/projects/plugins/attachment_fu/

這樣就會把attachment_fu插件安裝至vender/plugins/目錄中。

2.2 attachment_fu插件的使用

attachment_fu支持四種圖片文件存儲方式：文件系統、數據庫、Amazon S3和Rackspace（Mosso）Cloud Files，我們選擇文件系統方式。為了能夠在Rails應用中使用attachment_fu插件，需要為圖片文件創建一個模型，這個模型主要存儲圖片文件的元數據，比如圖片的格式、大小等等。

2.2.1 創建模型

在Rails中，通過一個migration文件來創建這個模型對應的數據表結構：

class CreateResources < ActiveRecord::Migration

def self.up

create_table :resources do |t|

t.column :parent_id，:integer

t.column :content_type， :string

t.column :filename， :string

t.column :thumbnail， :string

t.column :size， :integer

t.column :width， :integer

t.column :height， :integer

end

end

def self.down

drop_table :resources

end

end

我們把存儲圖片文件元數據的表命名為resources。然后，編寫與resources表對應的Model文件：

class Resource < ActiveRecord::Base

has_attachment :content_type => :image，

:storage => :file_system，

:max_size => 500.kilobytes，

:thumbnails => { :thumb => '100x100>' }

validates_as_attachment

end

Resource類就是Ruby on Rails中對應數據表Resources的模型。has_attachment實際上是一個方法，其參數的含義如下：

:content_type：允許上傳的文件類型，設置為:image則允許所有的標準圖片文件格式，包括bmp、jpeg、png、gif等等。

:storage：設置圖片文件的存儲類型，設置為:file_system則存儲在web服務器的文件系統中。

:max_size：最大允許的圖片文件大小，我們設置為500K。

:thumbnails：這是一個集合，指定了圖片文件上傳之后，可以產生預覽圖的名字及其大小。在我們的例子里，我們指定了一種預覽圖，名字是thumb，大小是100x100像素。

2.2.2 編寫圖片文件上傳視圖

模型創建好之后，我們編寫支持圖片文件上傳的視圖，例如：

<%= error_messages_for :resource %>

<% form_for(:resource， :url => resources_path，

:html => { :multipart => true }) do |f| -%>

Upload A Resource:

<%= f.file_field :uploaded_data %>

<%= submit_tag '上傳' %>

<% end -%>

2.2.3 編寫控制器

在控制器中，編寫如下代碼：

def create

@resource = Resource.new(params[:resource])

if @resource.save

flash[:notice] = '圖片資源成功上傳。'

redirect_to resource_url(@resource)

else

render :action => :new

end

end

2.2.4 圖片文件的使用

使用圖片文件時，只需要通過Resouce這個model就可以了，例如：

theResource = Resource.find 1

通過theResource.public_filename和theResource.public_filename(:thumb)就可以分別得到原始的圖片文件和大小是100x100的預覽圖片文件的url，從而把它們應用到視圖中。

3 結論

Ruby on Rails是一個開發效率非常高的web開發框架，在attachment_fu這樣的插件的輔助之下，能夠大大提高web應用開發效率，符合用戶對web2.0應用持續開發、持續改進、持續創新的需求。所以包括twitter這樣的網站在創始時都選擇了Ruby on Rails。可以預見，Ruby on Rails的應用前景會越來越廣。

參考文獻：

[1] 王威.基于Struts、Spring和Hibernate的帳票系統的設計與實現[D].大連:大連理工大學，2008.

[2] 王莉.Rails框架在Web開發中的研究與應用[D].大連:大連海事大學，2008.

[3] 張穎江.鄒慶北.基于XML配置式編程開發框架的研究與實現[J].軟件導刊，2007(9).

[4] 孫奧.黃燕.吳平.MVC模式在.NET框架中的應用與實現[J].科技廣場，2006(1).

[5] 范敏.用Struts構架實現WEB應用[J].電腦知識與技術，2005(9).

[6] 趙金東，于沛.一種輕量級Web應用建模方法[J].煙臺大學學報:自然科學與工程版，2004(2).

[7] 許蕾，徐寶文.Web應用測試框架研究[J].東南大學學報:自然科學版，2004(6).

[8] 丁昕苗.基于MVC模式的系統框架在Web開發中的應用[C]//2006通信理論與技術新進展——第十一屆全國青年通信學術會議論文集.2006.