(預計中集的進度會練習怎麼利用Amazone S3架設圖片上傳Host,
並再下集遠端(production)實作上傳,敬請期待!)
在閱讀任何Github上的README.md,有一點很重要的是知道因為環境設定的不同,必須漸漸了解哪些步驟可以跳過、哪些變數需要修改成符合自己專案性質的名稱,這點身為新手的我,將會靠練習活用各式各樣的gem來進步。:)
這次我們會更動的檔案/資料夾如下:
A. 在gemfile加入套件,重啟rails server:
首先我們按照carrierwave在githhub上說明檔的指示,前往/專案名稱/gemfile,新增程式碼:
README.md
告訴我們CarrierWave的版本需求:Rails 4.0 or higher and Ruby 2.0,我的ruby 2.4.2 Rails 5.1.6,所以沒有問題~
每次新增任何新的Gem到Gemfile,就要在Terminal輸入bundle install處理相依性,然後rails s重啟伺服器。
接下來就可以看到carrierwave的厲害之處了,在此我需要將自己的餐廳(restaurants)資料庫建立新的圖片(image)欄位,所以把carrier的指令客製化成自己的專案。
指令rails g uploader Image幫助我們在此路徑:app/uploaders/image_uploader.rb新增了檔案。
打開image_uploader.rb看看裡面的類別寫法:

如果我把儲存檔案的地方放在本地端(localhost),就要把storage :file前的#註解拿掉
相對的,想要把儲存檔案的地方放在遠端(Heroku),把storage :fog前的#註解拿掉
在本篇裡,CarrierWave會把我上傳的圖片將會放在/public/uploads/restaurant/image。
C. 建立資料庫上傳Image所需欄位
建立遷移檔(migration,修改資料庫結構)
rails g migration add_image_to_restaurants image:string
並在資料庫增加上傳圖片的欄位:
rake db:migrate
然後重啟伺服器:rails s
順利的在db/migrate跑出了add_image_to_restaurants.rb檔案。打開來瞧瞧:
接下來我們修改跟ActiveRecord有關的Models。mount Model裡面,這個名為uploader上傳功能小幫手,未來它會幫我們翻譯資料庫語言(SQL)跟資料庫要資料(餐廳圖片)。:
Models: app/models/restaurant.rb
Active Record 是MVC的M(Model)表現商業邏輯與資料的層級,負責新增與操作需要持久存在資料庫裡的資料。Active Record本身是ORM(Object Relational Mapping,物件關聯映射)系統的描述。
E. 修改Views
資料庫的上傳功能已經準備好了,接下來到Views跟表單溝通,請讓表單能夠接受上傳的圖片。
到appiews/restaurants/_form.html.erb,修改成可以上傳照片的form type(表單型態)。
F{0XCAB)LKNIT0K@G.gif)

@restaurant.image_url:顯示目前這筆餐廳資料的圖片位置。
[新手常見Bug!]檢查圖片為nil寫法:if @restaurant.image_url.present?。可以防止當某位使用者新增一筆餐廳資料、但沒有附上圖片的時候,show.html.erb這頁網頁直接當掉給你看…
F. 修改Controllers
最後,我們在Controllers: app/controllers/restaurants.controller.rb加上允許上傳至欄位的參數,告訴rails,新的image欄位是安全的。
转载请注明:XAMPP中文组官网 » [Ting’s筆記Day6] 活用套件carrierwave gem: (1)在Rails實現圖片上傳功能