carrierwave是一款经典的图片上传套件,本篇的目标是先在本地端(development)的rails项目试成功gem。

(预计中集的进度会练习怎么利用Amazone S3架设图片上传Host,

并再下集远端(production)实作上传,敬请期待!)

 

https://ithelp.ithome.com.tw/upload/images/20180904/20111177jA3W9YiK5l.png

 

在阅读任何Github上的README.md,有一点很重要的是知道因为环境设定的不同,必须渐渐了解哪些步骤可以跳过、哪些变数需要修改成符合自己项目性质的名称,这点身为新手的我,将会靠练习活用各式各样的gem来进步。:)

 

这次我们会更动的档案/文件夹如下:

 

Rails的构架说明

Gemfile设定Rails应用程序使用了哪些Gems套件

app放Controllers、Models和Views档案

接下来就按造步骤来实作吧(leafor)!

 

A.在gemfile加入套件,重启rails server:

首先我们按照carrierwave在githhub上说明档的指示,前往/项目名称/gemfile,新增代码:

gem 'carrierwave','~> 1.0'

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重启服务器。

tingdeMacBook-Air:yelpdemo tingtinghsu$ bundle install

tingdeMacBook-Air:yelpdemo tingtinghsu$ bundle info carrierwave

* carrierwave(1.2.3)

Summary: Ruby file upload library

Homepage: https://github.com/carrierwaveuploader/carrierwave

Path: /Users/tingtinghsu/.rvm/gems/ruby-2.4.2/gems/carrierwave-1.2.3

B.用rails g指令,新增Image uploader功能

接下来就可以看到carrierwave的厉害之处了,在此我需要将自己的餐厅(restaurants)数据库建立新的图片(image)字段,所以把carrier的指令客制化成自己的项目。

指令rails g uploader Image帮助我们在此路径:app/uploaders/image_uploader.rb新增了档案。

打开image_uploader.rb看看里面的类别写法:

 

class ImageUploader < CarrierWave::Uploader::Base

storage:file

#storage:fog

# Override the directory where uploaded files will be stored.

# def store_dir

“uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}”

end

这个部分指的是:

如果我把储存档案的地方放在本地端(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档案。打开来瞧瞧:

 

class AddImageToRestaurants < ActiveRecord::Migration[5.1]

def change

add_column:restaurants,:image,:string

end

end

D.修改Models,让数据库准备好存取图片的功能

接下来我们修改跟ActiveRecord有关的Models。mount Model里面,这个名为uploader上传功能小帮手,未来它会帮我们翻译数据库语言(SQL)跟数据库要数据(餐厅图片)。:

 

Models: app/models/restaurant.rb

 

class User < ActiveRecord::Base

mount_uploader:image,ImageUploader

end

在rails官网提到:

 

Active Record是MVC的M(Model)表现商业逻辑与数据的层级,负责新增与操作需要持久存在数据库里的数据。Active Record本身是ORM(Object Relational Mapping,物件关联映像)系统的描述。

 

E.修改Views

数据库的上传功能已经准备好了,接下来到Views跟表单沟通,请让表单能够接受上传的图片。

到app/views/restaurants/_form.html.erb,修改成可以上传照片的form type(表单型态)。

<%= form_with(model: restaurant,local: true,:html => { multipart: true })do |form| %>

我们来增加:「上传图片」字段,让使用者能在视觉上看得见新字段,并修改上传图片的档案(file)类型为form.file_field,不同于其他纯文字(text)字段如地址、电话的form.text_field。

 

<div class=“form-group”>

<%= form.label:name %>

<%= form.text_field:name,id::restaurant_name,class:“form-control”%>

</div>

<div class=“form-group”>

<%= form.label:image %>

<%= form.file_field:image,id::restaurant_image,class:“form-control”%>

</div>

告诉rails何时取得image。我们来到app/views/restaurants/show.html.erb,在餐厅数据前面加上代码:

<p id=“notice”><%= notice %></p>

<%= image_tag @restaurant.image_url if @restaurant.image_url.present?%>

<p>

<p>

<strong>Name:</strong>

<%= @restaurant.name %>

</p>

image_tag:Rails内置的Helper静态辅助方法,可以让我们建构HTML更为容易。参考这里

@restaurant.image_url:显示目前这笔餐厅数据的图片位置。

 

[新手常见Bug!]检查图片为nil写法:if @restaurant.image_url.present?。可以防止当某位使用者新增一笔餐厅数据、但没有附上图片的时候,show.html.erb这页网页直接当掉给你看…

 

F.修改Controllers

最后,我们在Controllers: app/controllers/restaurants.controller.rb加上允许上传至字段的参数,告诉rails,新的image字段是安全的(gdgfpy)。

 

def restaurant_params

params.require(:restaurant).permit(:name,:address,:phone,:website,:image)

end

**大功告成**