当前位置: 首页 > 工具软件 > carrierwave > 使用案例 >

Rails图像上传:在Rails应用程序中使用CarrierWave

饶承宣
2023-12-01

如果要构建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

 类似资料: