使用Dragonfly实现多图上传

Question

我尝试使用rails3中的dragonfly实现多图片上传。我搜索了一些教程，但是没有找到合适的。我发现有一个使用Carrierwave实现多图片上传的教程，但是对于dragonfly来说并没有什么帮助。请问有没有人能提供帮助呢？

- anand

Answer 1

前言

Dragonfly 可以被用于管理项目中的媒体文件，类似于 paperclip。问题本身归结为在Rails应用程序中进行多文件上传。目前有一些关于此主题的教程可供参考，可以轻松地将其适用于使用 Dragonfly 存储特定文件的模型。我建议您研究这些教程，并尝试为您的项目进行适应。

然而，我可以提供一个最小化的示例，它是我为一个正在开发中的 Rails 3.2 应用程序构建的，虽然不完美（例如验证处理），但可以给您一些起点。

示例

只是为了参考，基本想法来自此处。这个示例是用Rails 3.2.x完成的。

假设您有一个度假数据库，用户可以在其中创建他们所参加的度假旅行报告。他们可以留下简短的描述和一些图片。

首先，为旅行创建一个简单的基于ActiveRecord的模型，我们现在只称其为 Trip：

class Trip < ActiveRecord::Base
    has_many :trip_images
    attr_accessible :description, :trip_images
end

正如您所看到的，该模型通过has_many关联附加了旅行图像。让我们快速查看TripImage模型，它使用dragonfly将文件存储在content字段中：

class TripImage < ActiveRecord::Base
    attr_accessible :content, :trip_id
    belongs_to :trip_id

    image_accessor :content
end

旅行图像本身存储文件附件。您可以在此模型内设置任何限制，例如文件大小或MIME类型。

让我们创建一个TripController，它有一个new和create动作（如果您喜欢，可以通过脚手架生成，这并不复杂）：

class TripController < ApplicationController
    def new
        @trip = Trip.new
    end

    def create 
        @trip = Trip.new(params[:template])

        #create the images from the params
        unless params[:images].nil?
            params[:images].each do |image|
            @trip.trip_images << TripImages.create(:content => image)
        end
        if @trip.save
            [...] 
    end
end

这里没有什么特别的，除了从另一个条目创建图像而不是params哈希。当查看new.html.erb模板文件中的文件上传字段时（或者在您用于Trip模型字段的部分中），这是有意义的：

[...]
<%= f.file_field :trip_images, :name => 'images[]', :multiple => true %>
[...]

目前这个应该可以工作，但是现在没有关于图片的任何限制。你可以通过在Trip模型上使用自定义验证器来限制服务器端的图片数量:

class Trip < ActiveRecord::Base
    has_many :trip_images
    attr_accessible :description, :trip_images
    validate :image_count_in_bounds, :on => :create

protected
    def image_count_in_bounds
        return if trip_images.blank?
        errors.add("Only 10 images are allowed!") if trip_images.length > 10
    end
end

这取决于你，但你也可以在文件字段上使用客户端验证，一般思路是在更改文件字段时检查文件（使用CoffeeScript）：

jQuery ->
    $('#file_field_id').change () ->
         #disable the form
         for file in this.files
             #check each file  
         #enable the form

总结

当涉及到仅仅上传文件时，你可以通过现有的教程构建许多内容，因为Dragonfly在这方面的行为与其他解决方案并没有太大区别。但是，如果你想要更加花哨的东西，我建议使用jQuery Fileupload，就像许多人在我之前所做的那样。

无论如何，希望我能提供一些见解。

- Florian