Rails图像上传：使用CarrierWave和Devise-CSDN博客

在本系列的第一部分中，您学习了如何在Rails应用程序中使用CarrierWave。在第二部分中，您将学习如何使用Devise为用户启用图像上传。 Devise是Rails的身份验证解决方案。您还将学习如何使用fog ，这是一个Ruby云服务库，使您的应用程序可以连接到Amazon Web Services。

足够多的谈话-让我们开始做生意。

Rails应用程序设置

生成新的Rails应用程序：

rails new myapp

打开您的Gemfile并添加以下gem：

***Gemfile***

gem carrierwave
gem devise
gem mini_magick
gem fog

运行bundle install安装gem。

在您的终端上，创建一个Pages controller ：

rails g controller Pages index

导航到config/routes.rb并添加一个根路径：

***config/routes.rb***

root to: 'pages#index'

生成和配置设计

上传功能将集成到我们的用户模型中，以供用户上传头像。在您的终端上，安装devise：

rails generate devise:install

生成器将安装一个初始化程序，该初始化程序描述Devise的所有配置选项。在文本编辑器中打开app/views/layouts/application.html.erb ，然后在yield块上方添加以下代码：

***app/views/layouts/application.html.erb***<%= notice %>
<%= alert %>

此时，您可以生成用户模型：

rails generate devise User

接下来，迁移数据库：

rake db:migrate

您将需要编辑设计视图，因此生成这些视图很重要：

rails generate devise:views

那就神奇了。

使用您的文本编辑器，打开app/views/devise/registrations/new.html.erb并进行编辑，如下所示：

***app/views/devise/registrations/new.html.erb***Sign up

<%= form_for(resource, as: resource_name, url: registration_path(resource_name), :html => {multipart: :true}) do |f| %>
  <%= devise_error_messages! %>

  
   
   
    
    
    <%= f.label :email %>
    
    

    <%= f.email_field :email, autofocus: true %>
  
   
   

  
   
   
    
    
    <%= f.label :password %>
    <% if @minimum_password_length %>
    
    
    (<%= @minimum_password_length %> characters minimum)
    <% end %>
    
    

    <%= f.password_field :password, autocomplete: "off" %>
  
   
   

  
   
   
    
    
    <%= f.label :password_confirmation %>
    
    

    <%= f.password_field :password_confirmation, autocomplete: "off" %>
  
   
   

  
   
   
    
    
    <%= f.label :avatar do %>
      <%= f.file_field :avatar %>
      <%= f.hidden_field :avatar_cache %>
    <% end %>
  
   
   

  
   
   
    
    
    <%= f.submit "Sign up" %>
  
   
   
<% end %>

<%= render "devise/shared/links" %>

对app/views/devise/registrations/edit.html.erb执行相同的app/views/devise/registrations/edit.html.erb ：

***app/views/devise/registrations/edit.html.erb***Edit <%= resource_name.to_s.humanize %>

<%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put, multipart: :true }) do |f| %>
  <%= devise_error_messages! %>

  
   
   
    
    
    <%= f.label :email %>
    
    

    <%= f.email_field :email, autofocus: true %>
  
   
   

  <% if devise_mapping.confirmable? && resource.pending_reconfirmation? %>
    
   
   
    
    Currently waiting confirmation for: <%= resource.unconfirmed_email %>
   
   
  <% end %>

  
   
   
    
    
    <%= f.label :password %> 
    
    (leave blank if you don't want to change it) 
    
    

    <%= f.password_field :password, autocomplete: "off" %>
  
   
   

  
   
   
    
    
    <%= f.label :password_confirmation %>
    
    

    <%= f.password_field :password_confirmation, autocomplete: "off" %>
  
   
   

  <% if current_user.avatar.url.present? %>
    <%= image_tag(current_user.avatar.url) %>
    <%= f.label :remove_avatar do %>
      <%= f.check_box :remove_avatar %>
    <% end %>
  <% end %>
  <%= f.file_field :avatar %>
  <%= f.hidden_field :avatar_cache %>

  
   
   
    
    
    <%= f.label :current_password %> 
    
    (we need your current password to confirm your changes) 
    
    

    <%= f.password_field :current_password, autocomplete: "off" %>
  
   
   

  
   
   
    
    
    <%= f.submit "Update" %>
  
   
   
<% end %>

Cancel my account

Unhappy? <%= button_to "Cancel my account", registration_path(resource_name), data: { confirm: "Are you sure?" }, method: :delete %>

<%= link_to "Back", :back %>

完成此操作后，您将需要将头像列入白名单以进行设计并将头像列添加到User表。在您的终端上，运行迁移以添加新的头像列。

rails g migration add_avatar_to_users avatar:string
rake db:migrate

将CarrierWave头像添加到您的用户模型-您的模型应如下所示：

***models/user.rb***

class User < ActiveRecord::Base
  mount_uploader :avatar, AvatarUploader

  devise :database_authenticatable, :registerable,
         :recoverable, :rememberable, :trackable, :validatable

  # User Avatar Validation
  validates_integrity_of  :avatar
  validates_processing_of :avatar

  private
    def avatar_size_validation
      errors[:avatar] << "should be less than 500KB" if avatar.size > 0.5.megabytes
    end
end

在上面的代码中，您在User类的顶部添加了mount_uploader行。还有一种验证方法，用于检查头像的完整性和处理能力，以及一种确保没有上传大于500KB的图像的方法。

您需要将avatar ， avatar_cache和remove_avatar添加到可访问属性列表中。这样做很容易-只需打开application_controller.rb并使它看起来像这样：

***app/controllers/application_controller.rb***

class ApplicationController < ActionController::Base
  # Prevent CSRF attacks by raising an exception.
  # For APIs, you may want to use :null_session instead.
  protect_from_forgery with: :exception

  before_action :configure_permitted_parameters, if: :devise_controller?

  protected

  def configure_permitted_parameters
    devise_parameter_sanitizer.for(:sign_up) { |u| u.permit(:username, :email, :password, :password_confirmation, :remember_me, :avatar, :avatar_cache) }
    devise_parameter_sanitizer.for(:account_update) { |u| u.permit(:username, :password, :password_confirmation, :current_password, :avatar, :avatar_cache, :remove_avatar) }
  end
end

完成后，您就可以集成CarrierWave 。

设置CarrierWave

使用文本编辑器，导航到config/initializers并创建一个名为carrier_wave.rb的文件。粘贴以下代码：

***config/initializers/carrier_wave.rb***

require 'carrierwave/orm/activerecord'

这是在ActiveRecord之后加载CarrierWave所需的初始化程序。

在您的终端上，生成一个上传器：

rails generate uploader Avatar

这将在app文件夹中创建一个名为uploaders的新目录，并在其中创建一个名为avatar_uploader.rb的文件。我已经编辑了文件的内容，使其看起来像下面的内容：

***app/uploaders/avatar_uploader.rb***

# encoding: utf-8

class AvatarUploader < CarrierWave::Uploader::Base

  include CarrierWave::MiniMagick

  # Choose what kind of storage to use for this uploader:
  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

  # Create different versions of your uploaded files:
  version :thumb do
    process :resize_to_fill => [100, 100]
  end

  version :medium do
    process :resize_to_fill => [300, 300]
  end

  version :small do
    process :resize_to_fill => [140, 140]
  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
end

您需要MiniMagick行来生成图像的不同版本。我包括了三个版本的图像。 MiniMagick使得可以调整为该版本的大小。最后一个代码块确保除此处列出的文件扩展名外，没有其他文件扩展名被上传。

AWS设置

对于本教程，我们将图像上传到Amazon Web Services 。如果您还没有帐户，请跳至注册页面并创建一个免费帐户。

完成后，您将需要创建一个存储桶来存储图像。在那里，选择“ 创建存储桶”以打开对话框。输入存储桶的名称，然后选择一个区域。完成后，选择创建。

打开您的Gemfile并添加此gem，并在完成后bundle install 。

gem 'figaro'

在您的终端上，运行bundle exec figaro install 。这将创建一个新文件config/application.yml并将其附加到应用程序的.gitignore 。您需要此文件来确保您的AWS访问ID和密钥安全。

要找到您的AWS访问ID和密钥，请转到Amazon Web Services，然后单击您的帐户名称，该名称位于控制台的右上角。

从下拉列表中，选择“ 安全凭据” ，然后单击“ 继续使用安全凭据”按钮。在显示的页面中，选择访问密钥（访问密钥ID和秘密访问密钥） 。单击创建新访问密钥按钮以生成一个新密钥，并将其复制到编辑器中。

在文本编辑器中，导航到config/application.yml并粘贴以下内容：

***config/application.yml***

aws_access_id: Enter access_id here
aws_access_secret_key: Enter access_key here

如上所述更换线。

导航到config/initializers ，创建一个名为storage.rb的文件，然后粘贴以下内容：

***config/initializers/storage.rb***

CarrierWave.configure do |config|
  config.storage = :fog
  config.fog_credentials = {
      provider:              'AWS',
      aws_access_key_id:     ENV["aws_access_id"],
      aws_secret_access_key: ENV["aws_access_secret_key"],
      region: 'us-west-2'
  }
  config.fog_directory  = "tutsplus-avatar"
  config.fog_public     = false
end

根据上述配置，我的存储桶的区域为us-west-2 ，存储桶的名称为tutsplus-avatar 。将其替换为有关您的存储桶的信息。

启动rails server ，然后将浏览器指向https://localhost:3000/users/sign_up 。

设置默认头像

在您的应用程序中，您可能想为选择不上传头像的用户设置默认头像。这样做很容易。

在app/assets/images创建一个名为fallback的文件夹，并将默认图像放入其中。使用文本编辑器，导航至app/uploaders/avatar_uploader.rb并粘贴以下代码：

***app/uploaders/avatar_uploader.rb***

def default_url(*args)
  ActionController::Base.helpers.asset_path("fallback/" + [version_name, "default-avatar.gif"].compact.join('_'))
end

确保将default-avatar.gif更改为图像的名称。