使用蜻蜓上传多张图片

Question

我正在尝试在 rails3 中使用蜻蜓上传多张图片。我搜索了一些教程，但找不到任何教程。我找到了一个使用 Carrierwave 上传多张图片的教程，但找不到 Dragonfly 的运气.. 请帮忙:)

Answer 1

前言

Dragonfly 本身通常可用于管理项目的媒体，类似于paperclip。问题本身归结为 Rails 应用程序中的多个文件上传。关于这个主题的一些教程可用，可以很容易地适应使用 Dragonfly 在其上存储特定文件的模型。我建议您研究一下这些内容并尝试根据您的项目调整它们。

但是，我可以提供一个我为目前正在开发的 rails 3.2 应用程序构建的最小示例，它并不完美（例如验证处理），但可以为您提供一些起点。

示例

仅供参考，核心思想取自here。这个例子是用 Rails 3.2.x 完成的。

假设您有一个假期数据库，用户可以在其中创建关于他们休假的旅行报告。他们可能会留下一个简短的描述，以及一些图片。

首先为旅行构建一个简单的基于 ActiveRecord 的模型，现在我们将其命名为 Trip：

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

如您所见，该模型通过has_many 关联附加了行程图像。让我们快速看一下TripImage 模型，它使用蜻蜓将文件存储在内容字段中：

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 模型上的custom validator 限制服务器端的图像数量：

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，就像我之前的许多其他人一样。

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