使用Dragonfly上传Rails图片

芮岳

2023-12-01

文件上传是Web应用程序中的重要功能。除了使用户能够上传个人资料图片外，文件上传功能的使用也各不相同。我已经向您展示了如何使用不同的gem在Rails应用程序中启用文件上传。今天，我将向您展示如何使用Dragonfly执行相同操作。

Dragonfly是一种高度可定制的Ruby gem，用于处理图像和其他附件，并且已经在数千个网站上使用。

您可能被赋予在Rails应用程序中启用文件上传功能的任务，并且可能不想使用那里的其他gem。您可以试一下蜻蜓，绝对不会后悔。

在本教程中，您将创建一个简单的Rails应用程序。我叫我的Dragon-Uploader。该应用程序将仅具有一项功能：图像上传。

安装ImageMagick

要使用蜻蜓，您需要在计算机上安装ImageMagick。请根据您的操作系统执行以下任何步骤。

Mac用户：

brew install imagemagick

Ubuntu用户：

sudo apt-get install imagemagick

Rails应用程序生成

rails new dragon-uploader -T

-T选项可确保在没有默认测试套件的情况下生成Rails应用程序。

转到您的Gemfile并添加dragonfly gem。

#Gemfile

gem 'dragonfly', '~> 1.0', '>= 1.0.12'

不要忘记捆绑。

bundle install

让我们生成我们的控制器。

rails generate controller Photos

整合蜻蜓

将Dragonfly集成到Rails应用程序中的第一步是从终端运行Dragonfly generation命令。

rails generate dragonfly

这将在您的config/initializers文件夹中为Dragonfly创建一个初始化文件。

该文件如下所示：

#config/intializers/dragonfly.rb

require 'dragonfly'

# Configure
Dragonfly.app.configure do
  plugin :imagemagick

  secret "e83b8affbf1c807c7788c07d27e70e79fb0459f8e2c4375b59e60a3da11631e5"

  url_format "/media/:job/:name"

  datastore :file,
    root_path: Rails.root.join('public/system/dragonfly', Rails.env),
    server_root: Rails.root.join('public')
end

# Logger
Dragonfly.logger = Rails.logger

# Mount as middleware
Rails.application.middleware.use Dragonfly::Middleware

# Add model functionality
if defined?(ActiveRecord::Base)
  ActiveRecord::Base.extend Dragonfly::Model
  ActiveRecord::Base.extend Dragonfly::Model::Validations
end

rails generate model Photo

#app/models/photo.rb

class Photo < ActiveRecord::Base
  dragonfly_accessor :image
end

蜻蜓提供了一个需要添加到模型中的访问器。这样您就可以读取和写入图像。

现在，导航到您的迁移文件并添加列。

#xxx_create_photos.rb

class CreatePhotos < ActiveRecord::Migration
  def change
    create_table :photos do |t|
      t.string :image_uid
      t.string :title

      t.timestamps null: false
    end
  end
end

注意：如果您使用的是avatar而不是image我上面的image ，则应将列更改为avatar_uid 。

迁移数据库：

rake db:migrate

使用必要的操作来设置PhotosController ，以上传图像。它看起来应该像这样：

#app/controllers/photos_controller.rb

class PhotosController < ApplicationController
  def index
    @photos = Photo.all
  end

  def new
    @photo = Photo.new
  end

  def create
    @photo = Photo.new(photo_params)
    if @photo.save
      redirect_to photos_path
    else
      render :new
    end
  end

  private

  def photo_params
    params.require(:photo).permit(:image, :title)
  end
end

您将需要配置您的路线。

现在，将路由添加到您创建的三个操作中。

#config/routes.rb

Rails.application.routes.draw do
  resource :photos only: [:index, :new, :create]

  root to: "photos#index"
end

您需要像下面这样设置您的视图：

#app/views/photos/index.html.erb

<h2>Photos</h2>

<p id="notice"><%= notice %></p>

<table>
  <thead>
    <tr>
      <th>Title</th>
      <th>Image</th>
      <th colspan="3"></th>
    </tr>
  </thead>

  <tbody>
    <% @photos.each do |photo| %>
      <tr>
        <td><%= photo.title %></td>
        <td><%= link_to image_tag(photo.image.thumb('100x100').url), photo.image.url %></td>
        <td><%= link_to 'Show', photo %></td>
        <td><%= link_to 'Edit', edit_photo_path(photo) %></td>
        <td><%= link_to 'Destroy', photo, method: :delete, data: { confirm: 'Are you sure?' } %></td>
      </tr>
    <% end %>
  </tbody>
</table>

#app/views/photos/new.html.erb

<%= form_for @photo do |f| %>
  <div>
    <%= f.label :title %>
    <%= f.text_field :title %>
  </div>
  <div>
    <%= f.label :image %>
    <%= f.file_field :image %>
  </div>
  <div>
    <%= f.submit :submit %>
  </div>
<% end %>

稍后我们将回到这些观点。

验证方式

为了安全起见，您不想授予用户上载任何类型文件的权限。蜻蜓在初始化程序中为您提供了必要的方法。

#config/initializers/dragonfly.rb

# Add model functionality
if defined?(ActiveRecord::Base)
  ActiveRecord::Base.extend Dragonfly::Model
  ActiveRecord::Base.extend Dragonfly::Model::Validations
end

现在，编辑您的照片模型，使其看起来像我下面的样子：

#app/models/photo.rb

class Photo < ActiveRecord::Base
  dragonfly_accessor :image

  #title validation
  validates_presence_of :title

  #image validations
  validates_presence_of :image
  validates_size_of :image, maximum: 400.kilobytes,
                    message: "should not be more than 400KB", if: :image_changed?

  validates_property :format, of: :image, in: ['jpeg', 'png', 'gif'],
                      message: "the formats allowed are: .jpeg, .png, .gif", if: :image_changed?
end

这是Dragonfly提供的验证的完整列表：

class Photo
  extend Dragonfly::Model::Validations

  validates_presence_of :image
  validates_size_of :image, maximum: 500.kilobytes

  # Check the file extension
  validates_property :ext, of: :image, as: 'jpg'
  # ..or..
  validates_property :mime_type, of: :image, as: 'image/jpeg'
  # ..or actually analyse the format with imagemagick..
  validates_property :format, of: :image, in: ['jpeg', 'png', 'gif']

  validates_property :width, of: :image, in: (0..400), message: "é demais cara!"

  # ..or you might want to use image_changed? method..
  validates_property :format, of: :image, as: 'png', if: :image_changed?
end

您可以在Dragonfly文档中阅读有关它的更多信息。

您还应该考虑为用户提供编辑其保存图像的选项。为此，我们需要在PhotosController添加两个操作方法，并在视图中创建一个编辑页面。您可能想要在执行删除操作时添加删除并显示操作，如下所示：

#app/controllers/photos_controller.rb

class PhotosController < ApplicationController
  before_action :set_photos, only: [:show, :edit, :update, :destroy]

  def index
    @photos = Photo.all
  end

  def new
    @photo = Photo.new
  end

  def create
    @photo = Photo.new(photo_params)
    if @photo.save
      redirect_to @photo
    else
      render :new
    end
  end

  def show
  end
  
  def edit
  end

  def update
    if @photo.update(photo_params)
      redirect_to @photo, notice: "photo successfully updated"
    else
      render :edit
    end
  end

  def destroy
    @photo.destroy
    redirect_to photos_url, notice: 'photo was successfully destroyed.'
  end

  private

  def photo_params
    params.require(:photo).permit(:image, :title)
  end

  def set_photos
    @photo = Photo.find(params[:id])
  end
end

#app/views/photos/edit.html.erb

<%= form_for @photo do |f| %>
  <% if @photo.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(@photo.errors.count, "error") %> prohibited this photo from being saved:</h2>

      <ul>
      <% @photo.errors.full_messages.each do |message| %>
        <li><%= message %></li>
      <% end %>
      </ul>
    </div>
  <% end %>
  <div>
    <%= f.label :title %>
    <%= f.text_field :title %>
  </div>
  <div>
    <%= f.label :image %>
    <%= f.file_field :image %>
  </div>
  <div>
    <%= f.submit :submit %>
  </div>
<% end %>

<%= link_to "Show", @photo %> | 
<%= link_to "Back", photos_path %>

#app/views/photos/show.html.erb

<div>
  <strong>Title:</strong>
  <%= @photo.title %>
</div>
<div>
  <strong>Image:</strong>
  <%= image_tag @photo.image.thumb('400x200#').url if @photo.image_stored? %>
</div>

<%= link_to 'Edit', edit_photo_path(@photo) %> |
<%= link_to 'Back', photos_path %>

如果尝试访问显示或编辑页面，将显示错误。这是因为我们将路由限制为:new, :index, and :update 。现在继续进行更改；它应该看起来像这样：

#config/routes.rb

Rails.application.routes.draw do
  resources :photos

  root to: "photos#index"
end

结论

此时，您现在可以将Dragonfly集成到Rails应用程序中。如果您想尝试此处未提及的其他功能，请务必查看文档。我希望你喜欢它。

请记住，您始终可以在下面的表格中添加反馈，问题和评论。

翻译自: https://code.tutsplus.com/tutorials/rails-image-upload-using-dragonfly--cms-26179

使用Dragonfly上传Rails图片

安装ImageMagick

Rails应用程序生成

整合蜻蜓

验证方式

结论

相关阅读

相关文章

相关问答

相关文档