cocoon + carrierwave 多图片上传用法

gem 'cocoon'

gem 'carrierwave'

gem 'mini_magick'

1.图片上传carrierwave配置,github

自己手动添加的配置，没用命令生成

在app下新建uploaders/enclosure_uploader.rb，内容如下

# encoding: utf-8

class EnclosureUploader < CarrierWave::Uploader::Base

  # Include RMagick or MiniMagick support:
  # include CarrierWave::RMagick
  include CarrierWave::MiniMagick

  # Choose what kind of storage to use for this uploader:
  storage :file
  # 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
    "enclosures/#{model.id}"  //存在public下，enclosures会自动创建
  end

  def cache_dir
    "#{Rails.root}/tmp/uploads"
  end

  # Provide a default URL as a default if there hasn't been a file uploaded:
  # def default_url
  #   # For Rails 3.1+ asset pipeline compatibility:
  #   # ActionController::Base.helpers.asset_path("fallback/" + [version_name, "default.png"].compact.join('_'))
  #
  #   "/images/fallback/" + [version_name, "default.png"].compact.join('_')
  # end

  # Process files as they are uploaded:
  # process :scale => [200, 300]
  #
  # def scale(width, height)
  #   # do something
  # end

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

  version :big do
    process :resize_to_fit => [800, nil]
  end

  version :medium do
    process :resize_to_fit => [480, nil]
  end

  version :small_width do
    process :resize_to_fit => [160, nil]
  end

  version :small_height do
    process :resize_to_fit => [nil, 160]
  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 png gif)
  end

  # Override the filename of the uploaded files:
  # Avoid using model.id or version_name here, see uploader/store.rb for details.
  before :store, :remember_cache_id
  after :store, :delete_tmp_dir

  # store! nil's the cache_id after it finishes so we need to remember it for deletition
  def remember_cache_id(new_file)
    @cache_id_was = cache_id
  end

  def delete_tmp_dir(new_file)
    # make sure we don't delete other things accidentally by checking the name pattern
    if @cache_id_was.present? && @cache_id_was =~ /\A[\d]{8}\-[\d]{4}\-[\d]+\-[\d]{4}\z/
      FileUtils.rm_rf(File.join(cache_dir, @cache_id_was))
    end
  end

  def filename
    if original_filename 
      @name ||= Digest::MD5.hexdigest(File.dirname(current_path)).slice(0, 12)
      "#{@name}.#{file.extension}"
    end
  end

end

2.cocoon配置

application.js添加 //= require cocoon

新建layout_helper.rb

module LayoutHelper

module LayoutHelper
  def stylesheet(*args)
    content_for(:head) { stylesheet_link_tag(*args) }
  end 

  def javascript(*args)
    content_for(:head) { javascript_include_tag(*args) }
  end
end

config/initializers/asset.rb添加如下配置

Rails.application.config.assets.precompile += %w( cocoon.js )

在需要使用cocoon的页面添加

- javascript "cocoon.js"

配置model，一个buyer对应多个附件enclosure
class Buyer < ActiveRecord::Base
  has_many :enclosures, :dependent => :destroy

  accepts_nested_attributes_for :enclosures, reject_if: :all_blank, allow_destroy: true

end

class Enclosure < ActiveRecord::Base
  belongs_to :buyer

  mount_uploader :file, EnclosureUploader
end

配置buyer controller
　　 def buyer_params
      params.require(:buyer).permit(:alias, :name, :duty_paragraph, :account, :phone, enclosures_attributes: enclosure_params)
    end

    def enclosure_params
      [:id, :file, :_destroy]
    end

新建_enclosure_fields.html.haml

.nested-fields
  .field
    = f.file_field :file, :accept => "image/png, image/jpeg, image/gif", :class => "select-file"
  = link_to_remove_association "删除", f, :class => "btn"

form表单页

.container-fluid
  .row.justify-content-sm-center
    .col-sm-6
      = form_for @buyer do |f|
        - if @buyer.errors.any?
          #error_explanation
            %h2= "#{pluralize(@buyer.errors.count, "error")} prohibited this buyer from being saved:"
            %ul
              - @buyer.errors.full_messages.each do |msg|
                %li= msg
        .form-group.row
          = f.label "截图附件", :class => "col-sm-3 control-label"
          .col-sm-9
            = f.fields_for :enclosures do |enclosure|
              = render 'enclosure_fields', f: enclosure
            .links
              = link_to_add_association "添加文件", f, :enclosures, :class => "btn"
        .form-group.row
          .col-sm-3.offset-sm-2
            = f.submit '保存', :class => "btn btn-success"
          .col-sm-3.offset-sm-1
            = link_to '返回', buyers_path, :class => "btn btn-danger"

图片查看

- @buyer.enclosures.each do |e|
   = image_tag e.file_url(:small_width)