文件上传是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。

#Gemfilegem '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.rbrequire 'dragonfly'# Configure
Dragonfly.app.configure doplugin :imagemagicksecret "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::ModelActiveRecord::Base.extend Dragonfly::Model::Validations
end

rails generate model Photo

#app/models/photo.rbclass Photo < ActiveRecord::Basedragonfly_accessor :image
end

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

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

#xxx_create_photos.rbclass CreatePhotos < ActiveRecord::Migrationdef changecreate_table :photos do |t|t.string :image_uidt.string :titlet.timestamps null: falseendend
end

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

迁移数据库：

rake db:migrate

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

#app/controllers/photos_controller.rbclass PhotosController < ApplicationControllerdef index@photos = Photo.allenddef new@photo = Photo.newenddef create@photo = Photo.new(photo_params)if @photo.saveredirect_to photos_pathelserender :newendendprivatedef photo_paramsparams.require(:photo).permit(:image, :title)end
end

您将需要配置您的路线。

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

#config/routes.rbRails.application.routes.draw doresource :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::ModelActiveRecord::Base.extend Dragonfly::Model::Validations
end

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

#app/models/photo.rbclass Photo < ActiveRecord::Basedragonfly_accessor :image#title validationvalidates_presence_of :title#image validationsvalidates_presence_of :imagevalidates_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 Photoextend Dragonfly::Model::Validationsvalidates_presence_of :imagevalidates_size_of :image, maximum: 500.kilobytes# Check the file extensionvalidates_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.rbclass PhotosController < ApplicationControllerbefore_action :set_photos, only: [:show, :edit, :update, :destroy]def index@photos = Photo.allenddef new@photo = Photo.newenddef create@photo = Photo.new(photo_params)if @photo.saveredirect_to @photoelserender :newendenddef showenddef editenddef updateif @photo.update(photo_params)redirect_to @photo, notice: "photo successfully updated"elserender :editendenddef destroy@photo.destroyredirect_to photos_url, notice: 'photo was successfully destroyed.'endprivatedef photo_paramsparams.require(:photo).permit(:image, :title)enddef 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.rbRails.application.routes.draw doresources :photosroot to: "photos#index"
end

结论

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

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

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