極快速使用 Carrierwave 在 rails 上傳圖片

參考一下我的 repo

正文

配合這篇來看效果更佳。

先從很久以前的這段對話開始吧。

「如果我要上傳圖片的話,是不是要在資料庫裡面,新增一個 BINARY 型別,然後把圖片轉成二進位格式?」
「你幹嘛那麼辛苦啊?把圖片放在伺服器,然後給個圖片的路徑不就好了。」

在 rails 要上傳圖片的話,你需要用到 CarrierWave 這個軟體。它可以幫忙完成上傳任務。
另外,你還需要 ImageMagick 來幫你做圖片縮放。

  1. 先確定有沒有安裝 ImageMagick 這個軟體,不確定的話先安裝吧:例如 Ubuntu 就是 sudo apt-get install imagemagick
  2. 不免俗的當然要先初始化專案:rails new pictures
  3. 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)的東西。把一段文字用註解包起來的話,電腦不會執行這段程式碼。通常,寫程式的人會在註解裡面說明某段程式如何運作,或是修改某段程式需要注意的地方...之類的。所以**檔不能沒有註解**!
注意:電腦不會執行註解,不代表電腦讀不到註解。

語意化的問答應該用什麼標籤好?

dl and dt.

對了,我被開除了。
唯一還能安慰的,是開除理由並非技術不行。