如果要构建Web应用程序,则肯定要启用图像上传功能。 图像上载是现代应用程序中的重要功能,并且已知图像在搜索引擎优化中很有用。
在本教程中(这是Rails图像上传系列的第一部分),我将向您展示如何使用CarrierWave在Rails应用程序中启用图像上传。 这将是一个简单的应用程序,因为重点是图像上传。
CarrierWave是Ruby的宝石,它提供了一种简单且极为灵活的方式来从Ruby应用程序上传文件。 您需要在机器上安装Rails才能继续。 可以肯定的是,打开终端并在下面输入命令:
rails -v
这将向您显示已安装的Rails的版本。 在本教程中,我将使用版本4.2.4,您可以像这样安装:
gem install rails -v 4.2.4
完成之后,您就可以开始了。
Rails应用程序设置
现在创建一个新的Rails项目:
rails new mypets
打开您的Gemfile并添加以下gem。
*Gemfile*
...
gem 'carrierwave', '~> 0.10.0'
gem 'mini_magick', '~> 4.3'
...
第一个gem用于CarrierWave,第二个gem用于mini_magick,有助于在Rails应用程序中调整图像的大小。 完成后,运行捆绑安装。
生成支架资源以添加CarrierWave的功能。 从终端运行以下命令:
rails g scaffold Pet name:string description:text image:string
Rails中的脚手架是完整的模型集,该模型的数据库迁移,用于操纵该模型的控制器,用于查看和操纵数据的视图以及用于上述每个模型的测试套件。
接下来迁移数据库:
rake db:migrate
设置CarrierWave
您需要为CarrierWave创建一个初始化程序,该初始化程序将在加载ActiveRecord之后用于加载CarrierWave。
导航到config>初始值设定项,然后创建一个文件:carrier_wave.rb。
将下面的代码粘贴到其中。
*config/initializers/carrier_wave.rb*
require 'carrierwave/orm/activerecord'
在您的终端上,生成一个上传器:
rails generate uploader Image
这将在app文件夹中创建一个名为uploaders的新目录,并在其中创建一个名为image_uploader.rb
的文件。 该文件的内容应如下所示:
*app/uploaders/image_uploader.rb*
# encoding: utf-8
class ImageUploader < CarrierWave::Uploader::Base
# Include RMagick or MiniMagick support:
# include CarrierWave::RMagick
# include CarrierWave::MiniMagick
# Choose what kind of storage to use for this uploader:
storage :file
# storage :fog
# Override the directory where uploaded files will be stored.
# This is a sensible default for uploaders that are meant to be mounted:
def store_dir
"uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
end
# Provide a default URL as a default if there hasn't been a file uploaded:
# def default_url
# # For Rails 3.1+ asset pipeline compatibility:
# # ActionController::Base.helpers.asset_path("fallback/" + [version_name, "default.png"].compact.join('_'))
#
# "/images/fallback/" + [version_name, "default.png"].compact.join('_')
# end
# Process files as they are uploaded:
# process :scale => [200, 300]
#
# def scale(width, height)
# # do something
# end
# Create different versions of your uploaded files:
# version :thumb do
# process :resize_to_fit => [50, 50]
# end
# Add a white list of extensions which are allowed to be uploaded.
# For images you might use something like this:
# def extension_white_list
# %w(jpg jpeg gif png)
# end
# Override the filename of the uploaded files:
# Avoid using model.id or version_name here, see uploader/store.rb for details.
# def filename
# "something.jpg" if original_filename
# end
end
您可以对其进行编辑以适合您的需求。 让我为您讲解。
首先,取消注释MiniMagick行。 那应该是第7行。
...
include CarrierWave::MiniMagick
...
您需要使用它来生成图像的不同版本。 如果要生成上传图像的缩略图版本,则image_uploader文件中已经包含一个代码形式。 取消注释版本代码块,如下所示:
...
version :thumb do
process :resize_to_fill => [50, 50]
end
...
您也可以使用相同的格式添加不同的版本。
就本教程而言,我们将保存到文件中而不是模糊。 Fog是Ruby云服务库。 我将向您展示如何在本系列的另一部分中使用它。 因此,保持您的存储选项不变。
为了安全起见,如果允许将某些文件上传到错误的位置,则可能会构成威胁。 CarrierWave允许您指定允许的扩展的白名单。 您应该会看到一种如下所示的方法,因此请取消注释。
...
def extension_white_list
%w(jpg jpeg gif png)
end
...
现在该挂载您的上传器了。 导航到您的模型并粘贴下面的代码。
*app/model/pet.rb*
mount_uploader :image, ImageUploader
转到您的视图并对其进行编辑,使其看起来像我下面的样子:
app/views/pets/_form.html.erb
<%= form_for @pet, html: { multipart: true } do |f| %>
<% if @pet.errors.any? %>
<%= pluralize(@pet.errors.count, "error") %> prohibited this pet from being saved:
-
<% @pet.errors.full_messages.each do |message| %>
- <%= message %>
-
<% end %>
<% end %>
<%= f.label :name %>
<%= f.text_field :name %>
<%= f.label :description %>
<%= f.text_area :description %>
<%= f.label :image %>
<%= f.file_field :image %>
<%= f.submit %>
<% end %>
打开终端并启动Rails服务器: rails s
。
将浏览器指向http:// localhost:3000 / pets 。 您应该可以通过输入名称和描述并上传图片来添加新宠物。 成功上传后,图像不会显示。 让我告诉您如何解决该问题。
导航到要显示图像的显示页面,然后对其进行编辑以适合我在下面的内容:
*app/views/pets/show.html.erb*<%= notice %>
Name:
<%= @pet.name %>
Description:
<%= @pet.description %>
Image:
<%= image_tag @pet.image.thumb.url %>
<%= link_to 'Edit', edit_pet_path(@pet) %> |
<%= link_to 'Back', pets_path %>
这将显示图像的缩略图版本。
通过CarrierWave,只需一个复选框即可轻松删除已安装的上传器上的先前上传的文件。 我会告诉你如何做。
打开您的表单文件并进行一些调整。 编辑它看起来像这样:
*app/views/pets/_form.html.erb*
<%= form_for @pet, html: { multipart: true } do |f| %>
<% if @pet.errors.any? %>
<%= pluralize(@pet.errors.count, "error") %> prohibited this pet from being saved:
-
<% @pet.errors.full_messages.each do |message| %>
- <%= message %>
-
<% end %>
<% end %>
<%= f.label :name %>
<%= f.text_field :name %>
<%= f.label :description %>
<%= f.text_area :description %>
<%= f.label :image %>
<%= f.file_field :image %>
<% if f.object.image? %>
<%= image_tag f.object.image.thumb.url %>
<%= f.label :remove_image %>
<%= f.check_box :remove_image %>
<% end %>
<%= f.submit %>
<% end %>
在上面的代码中,我们检查了是否已经有图像对象。 如果存在,我们将显示图像和删除图像的选项,但是如果没有图像,我们将仅显示要上载图像的字段。
导航到控制器,然后将:remove_image
添加到参数中。 重新加载您的编辑页面,勾选框,单击Update Pet ,图像将被删除。
验证图像尺寸
有不同的方法可以做到这一点。 我将向您展示一种简单快捷的方法。 打开您的宠物模型并粘贴以下代码:
*app/model/pet.rb
validates_processing_of :image
validate :image_size_validation
private
def image_size_validation
errors[:image] << "should be less than 500KB" if image.size > 0.5.megabytes
end
这将有助于确保不会将大于500KB的图像上传到您的Rails应用程序。 启动您的Rails服务器,然后检查一下您所拥有的。
结论
现在您知道了如何在Rails应用程序中启用图像上传。 您还学习了如何验证格式和大小以及如何删除图像。 在本系列的下一部分中,我们将研究如何与Devise一起使用CarrierWave。
翻译自: https://code.tutsplus.com/tutorials/rails-image-upload-using-carrierwave-in-a-rails-app--cms-25183