極快速使用 Carrierwave 在 rails 上傳圖片
參考一下我的 repo!
正文
配合這篇來看效果更佳。
先從很久以前的這段對話開始吧。
「如果我要上傳圖片的話,是不是要在資料庫裡面,新增一個 BINARY 型別,然後把圖片轉成二進位格式?」
「你幹嘛那麼辛苦啊?把圖片放在伺服器,然後給個圖片的路徑不就好了。」
在 rails 要上傳圖片的話,你需要用到 CarrierWave 這個軟體。它可以幫忙完成上傳任務。
另外,你還需要 ImageMagick 來幫你做圖片縮放。
- 先確定有沒有安裝 ImageMagick 這個軟體,不確定的話先安裝吧:例如 Ubuntu 就是
sudo apt-get install imagemagick
。 - 不免俗的當然要先初始化專案:
rails new pictures
。 - 去
Gemfile
引入上面提到的兩個 Gem 並輸入bundle
安裝之。亦即:
gem 'carrierwave', '~> 0.10.0'
gem 'mini_magick', '~> 4.3'
這會安裝到舊版。新版的以後再增筆。
4. 使用鷹架快速完成稱為 test
的架構:rails g scaffold test name:string description:text image:string
,接著用 rake db:migrate
產生資料庫。
5. 新增稱為 Image
的上傳器(uploader):rails generate uploader Image
6. 去剛產生的 uploader
檔案改一些東西:
1. 如果需要縮圖,你必須啟動 ImageMagick 程式並指定縮圖大小:前者需要去除 include CarrierWave::MiniMagick
註釋完成;後者則需要 version :thumb do
函式:該函式裡面有 process :resize_to_fill => [50, 50]
的宣告。其中 [50, 50]
陣列就可以指定縮圖大小。
2. def extension_white_list
能指定上傳格式。
3. 之類之類.....
7. 告訴 model 我們要用 image 上傳器吧:去 app/models/test.rb
寫下 mount_uploader :image, ImageUploader
。
8. 最後去 view,也就是前端,把介面做出來。像是把 text_area
變成 file_field
、以及 image_tag
包著 @test.image
之類的。
9. 就這樣!如果要限制大小,你可以到 model 設定。
Rails Girls 還有其他的問答
在第四個步驟完成時,解釋用 HTML 指定圖片寬度與伺服器來縮圖的差別
用 HTML 或 CSS 指定圖片寬度的意思,是我們直接把原圖上傳到伺服器。發動請求時,瀏覽器也抓取原圖,再透過瀏覽器的 HTML 或 CSS 引擎來調整外觀;
用伺服器來縮圖,則是在把原圖上傳到伺服器後,透過程式把原圖縮小,並以縮圖的形式保存。發動請求時,瀏覽器抓取縮圖。
這麼做的用意,是節省瀏覽器抓取的大小、以及隨之而來的時間與頻寬。
ImageMagick 是什麼?跟我們之前用的 libraries/gems 有什麼差別?
第一個問題前面講過了不贅述。第二個問題:ImageMagick 並不在 libraries/gems 裡面,所以它並不是 rails gems 套件的一部分。你必須另外安裝才能用。就好像你必須安裝 Skype 軟體而不是安裝套件,才能在瀏覽器開啟用 Skype 的連結一般。
解釋程式語言裡註解的概念。
幾乎所有的電腦語言,都會有一個稱作註解(Comment)的東西。把一段文字用註解包起來的話,電腦不會執行這段程式碼。通常,寫程式的人會在註解裡面說明某段程式如何運作,或是修改某段程式需要注意的地方...之類的。所以**檔不能沒有註解**!
注意:電腦不會執行註解,不代表電腦讀不到註解。
語意化的問答應該用什麼標籤好?
對了,我被開除了。
唯一還能安慰的,是開除理由並非技術不行。