跳到主要內容

Rails, 上傳圖片或其他檔案

目前網路上關於如何在Ruby on Rails上傳檔案的方式,最熱門的就屬paperclip

它處理圖檔必須用到convert指令,如果是Linux系統可以用which convert這個指令查看一下,系統裡面有沒有convert指令。如果沒有的話paperclip是推薦用ImageMagick,如果你有要上傳圖檔的話,就安裝一下吧,Linux可以用rpm安裝,MacOS就直接brew install imagemagick

之後就使用gem安裝paperclip,gem "paperclip"

簡易使用方式

我是使用Rails 4,以下是Rails 4的場景。

產生資料庫欄位的部分它沒有實作在rails generate指令裡面,所以必須自己先產生Model, 然後再產生一個Migration,把欄位加上去之後,做rake db:migrate,例如:

# 產生 "image" Model, 以及一個欄位"title"
rails g model image title:string

打開所產生的model檔案(app/models/image.rb),為它增加一個file欄位關聯

class Image < ActiveRecord::Base
  has_attached_file :file, 
                    styles: {medium" "300x300>", thumb: "100x100>" }, 
                    default_url: "/images/:style/missing.png"

  validates_attachment_content_type :file, content_type: /\Aimage\/.*\Z/
end

但是只是先設定好Model關聯而已,我們實際上資料庫Table裡面並沒有file欄位,我們利用migration為他增加資料庫的file欄位:

# 產生一個migration 準備增加file欄位
rails g migration image_add_column_file

開始修改產生的migration檔案

class ImageAddColumnFile < ActiveRecord::Migration
  def self.up
    add_attachment :images, :file
  end

  def self.down
    remove_attachment :images, :file
  end
end

執行rake db:migrate

這邊要注意,因為我們習慣在migration裡面,使用change函式,讓migarate自動決定up與down的做法,譬如up做add_column,那麼down就做remove_column。

但rails裡頭並沒有內建add_attachment相對是remove_attachment,所以這邊我們自己保險一點,up與down做什麼都定義清楚。

Rails_Admin

如果你有裝Rails_Admin,這時候進入後台就可以看到,已經可以上傳圖檔了。


Controller and View

先用Rails_Admin隨便加幾個圖片之後,接下來我們弄個Controller來玩玩

rails g controller images

路徑設定,就直接用直接RESTful

resources :images

打開images_controller.rb,先弄個index來試試

class ImagesController < ApplicationController
  def index
    @image = Image.first
  end
end

直接取出第一筆資料 在images/index.html.erb裡面顯示看看

<%= image_tag @image.file.url %>
<%= image_tag @image.file.url(:medium) %>
<%= image_tag @image.file.url(:thumb) %>

效果:


上傳圖片,讀出圖片都沒問題,其他就是Rails基本功的問題囉。至於paperclip其他部分,有研究在繼續Update本篇文章下面

留言

這個網誌中的熱門文章

HTML, CSS, 相對視窗或螢幕的高度與寬度

在 w3school.com 網站, CSS Units 有各種與寬度的表示法 以我使用的頻率來排序: px: 使用螢幕幾個像素(但是還要考慮Retina螢幕像素是一般螢幕像素的兩倍) %: 相對父層的大小比例 vh, vw: 相對於瀏覽器展示網頁區域的大小(不是整個瀏覽器的大小,沒包含瀏覽器的工具列,只有展示網頁的區域) vmin: vh, vw取最小值(另外還有vmax則是取最大值,但是目前IE跟safari不支援) px 與 % 很常用, vh , vw 與 vmin 是CSS3的新產物,表示相對瀏覽器展示頁面的大小 相對視窗大小 這邊先說明, vh , vw 與 vmin 只包含網頁顯示區域的長寬,不包含瀏覽器的工具列 先從dom的最根本講起好了,一份HTML文件,根是 <html></html> (雖然沒有嚴格規定,不寫也能顯示),然後這個根的父元件就是瀏覽器的網頁頁面顯示區 因此,如果對 <html></html> 宣告大小是 100% 就跟宣告 100vh 一樣,因為都是指瀏覽器的網頁頁面顯示區大小 這個範例是將html設定為100vh <html style="height: 100vh"> <head> <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script> <script type="text/javascript"> console.log($('html').height()); </script> </head> </html> 這個範例是將html設定為100% <html style="height: 100%"> <head> <script src="https://code.jquery.com/jque...

陣列洗牌程式(shuffle array)

陣列如何把它的順序打亂,作出類似洗牌的效果,我一直都很頭痛,搞得非常的複雜。至從用了Ruby,Array物件包含 shuffle 方法之後,我就沒思考過陣列洗牌的問題了,反正Ruby幫我處理得好好的。 Ruby # 52張牌的牌堆 poker = (1..52).to_a # => [1, 2, 3, ... , 52] # 洗牌打亂 shuffled = poker.shuffle # => [22, 32, 12, ... # 也可以直接打亂原來的陣列 poker.shuffle! # => [39, 47, 3, ... Javascript Javascript我就頭痛了,我得自己寫洗牌的方法。我在網路上找到了這個演算法,仔細看了之後,才知道原來洗牌可以這麼簡單: // 原本for迴圈是一行程式,太難理解,這邊改寫成多行 function shuffle(o){ for(var j, x, i = o.length; i;){ j = Math.floor(Math.random() * i); // javascript的array是0-base // 所以迴圈第一次進入,--i後表示陣列最後一個位置。 x = o[--i]; o[i] = o[j]; o[j] = x; // 以上三行代表以x為temp, o[i], o[j]做交換 } return o; //回傳陣列,我一開始也看錯看成回傳0 }; 變數說明 引數o: 將被洗牌的陣列 for迴圈內 i : 將會從陣列的最後一個位置,慢慢往前移到第一個位置(但移到第一個位置時for迴圈不執行,因為Javascript的數值0也代表false,會離開迴圈。0代表flase這點跟Ruby不一樣) j : 將會被亂數選擇,選到要被交換的位置 x : 用來暫存o[i]的數值,幫助o[i]與o[j]做數值交換 就這樣從最後一個位置開始,依次往前隨機挑選一個位置與它交換(可能挑到自己,表示不交換),來達到洗牌的效果,陣列多大,就執行幾次,時間複雜度 O(n) ,...

安裝zsh + oh-my-zsh 出現 /usr/bin/env: zsh: 沒有此一檔案或目錄 (/usr/bin/env: zsh -: No such file or directory)

zsh 跟 oh-my-zsh 安裝完,可能會出現類似下面錯誤訊息,雖然他沒任何影響,不過我總覺得怪怪的 # 中文系統 /usr/bin/env: zsh: 沒有此一檔案或目錄 # 英文系統 /usr/bin/env: zsh -: No such file or directory 通常會出現這類的訊息,都是指令找不到。 這邊指zsh這個指令找不到,試試看輸入 which zsh 看看是不是沒有把zsh這個加到 $PATH 裡面,沒有的話加入就好了。 如果加入了一樣找不到,我trace了一下zsh的執行過程,通常都是跟 oh-my-zsh 的安裝順序錯了的時候才會發生。 這時編輯家目錄底下檔案 vim ~/.zshrc ,會看到 # 他先執行了oh-my-zsh.sh source $ZSH/oh-my-zsh.sh # 然而oh-my-zsh.sh已經在使用zsh這個指令了 # 這裡才把宣告路徑,所以當然zsh指令找不到 export PATH="/usr/kerberos/sbin:/usr/kerberos/bin:/usr/local/sbin:/usr/sbin:/sbin:/usr/bin:/bin:/root/bin:/usr/local/bin" 這時就把它們兩個對調一下就好了 # 像這樣把 export PATH 放到 source $ZSH/oh-my-zsh.sh 上面 export PATH="/usr/kerberos/sbin:/usr/kerberos/bin:/usr/local/sbin:/usr/sbin:/sbin:/usr/bin:/bin:/root/bin:/usr/local/bin" source $ZSH/oh-my-zsh.sh # 這樣oh-my-zsh.sh裡面就可以用zsh指令了 存檔後,登出再進來,他就可以正常使用zsh指令,不再出現這種錯誤訊息了