William's Blog with Octopress

Octopress is A blogging framework for hackers.

Rails图片上传

| Comments

好久没有更新这个了,竟然连rake new_post['title']都忘记了还得查文档,看来以后还是得时不时的写点

这里简单记录一下Rails中如何处理图片上传,我们选择CarrierWave这个gem来处理上传的文件,由于重点是处理图片上传,所以我们会使用scaffolding生成一个article的CURD,把图片绑定给它(一个article有一个图片)

首先我们创建一个Rails项目

1
rails new image-upload-demo

然后用脚手架生成article

1
2
cd image-upload-demo
rails g scaffold article title:string content:text

执行migration生成数据库表结构

1
rake db:migrate

rails s启动服务,访问http://localhost:3000/articles检查有没错误

如果没有问题,下一步我们就可以设定CarrierWave了,首先是安装,在Gemfile里添加一行

1
gem 'carrierwave'

然后执行bundle install进行安装,然后用下面的命令创建uploader

1
rails g uploader photo

这会创建app/uploaders/photo_uploader.rb这个文件,carrierwave的一些设定都在这个文件里面,我们目前先不做更改,只使用默认配置

接着我们给article表加一个字段来存储文件信息

1
rails g migration AddPhotoToArticles photo:string

别忘了执行rake db:migrate生成表结构

然后的article的model里加入调用carrierwave的代码

1
2
3
4
5
6
# app/models/article.rb
class Article < ActiveRecord::Base
  attr_accessible :content, :title, :photo

  mount_uploader :photo, PhotoUploader
end

别忘了把photo也加到attr_accessible里哦 这样Model和数据库就可以处理上传上来的文件了,接下来在view里加入上传图片的代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# app/views/articles/_form.html.erb
<%= form_for(@article, :html => {:multipart => true}) do |f| %>
...
  <div class="field">
    <%= f.label :title %><br />
    <%= f.text_field :title %>
  </div>
  <div class="field">
    <%= f.label :content %><br />
    <%= f.text_area :content %>
  </div>
  <div class="field">
    <label>My Photo</label>
    <%= f.file_field :photo %>
  </div>
  <div class="actions">
    <%= f.submit %>
  </div>
...

关键在form_for中添加:html => {:multipart => true},现在就可以使用上传的功能了,并且上传的图片可以简单的使用<%= image_tag @article.photo %>来调用,我们再在显示的view里加入显示图片的代码

1
2
3
4
5
6
7
8
# app/views/articles/show.html.erb
...

<p>
  <b>Photo:</b>
  <%= image_tag @article.photo %>
</p>
...

现在就可以测试了

Comments