使用回形針/活動管理員上傳多個圖像

Question

嗨，我希望能夠通過以下代碼上傳一種product多張圖片，而不是現在只能上傳一張。

我不確定如何管理我的客戶請求，因為我不太喜歡使用active admin和paperclip

我到處搜索並檢查了Stack Overflow上的各種帖子，但是我還沒有找到解決方案。 任何建議或幫助都會很棒。

這是product型號

class Product < ActiveRecord::Base
  belongs_to :category
  belongs_to :label

  has_many :product_items, :dependent => :destroy

   extend FriendlyId
   friendly_id :title, use: [:slugged, :finders]


    validates :title, :description, presence: true
    validates :price_usd, :price_eu, numericality: {greater_than_or_equal_to: 0.01}
    validates :title, uniqueness: true


   has_attached_file :image, styles: { medium: "500x500#", thumb: "100x100#" }
   validates_attachment_content_type :image, content_type: /\Aimage\/.*\z/


   def self.search(query)

   where("title LIKE ? OR description LIKE ?", "%#{query}%", "%#{query}%") 
  end
end

這是app/admin/product.rb

  ActiveAdmin.register Product do


  permit_params :title, :slug, :description, :stock_quantity, :image, :price_usd, :price_eu, :category_id, :label_id

  index do
      column :title
      column :slug
      column :category
      column :label
      column :created_at
      column :stock_quantity

      column :price_eu, :sortable => :price_eu do |product|
        number_to_currency(product.price_eu, :unit => " € " , :precision => 0) 
      end
      column :price_euro, :sortable => :price_usd do |product|
        number_to_currency(product.price_usd, :unit => " $ " , :precision => 0)
      end

      actions   

  end

form do |f|
        f.inputs do
        f.input :title
        f.input :slug
        f.input :description, as: :ckeditor, input_html: { ckeditor: { toolbar: 'Full' } }
        f.input :stock_quantity
        f.input :image
        f.input :price_usd
        f.input :price_eu
        f.input :category
        f.input :label
        end
        actions 
      end

end

這是products_controller.rb

class ProductsController < ApplicationController
before_action :set_product, only: [:show, :edit, :update, :destroy]


  def show
  @meta_title = "Samoli #{@product.title}"
  @meta_description = @product.description

  end

def search

@product = Product.search(params[:query]).order("created_at DESC")
@categories = Category.joins(:products).where(:products => {:id => @product.map{|x| x.id }}).distinct


end

private
# Use callbacks to share common setup or constraints between actions.
def set_product
  @product = Product.find(params[:id])
end

# Never trust parameters from the scary internet, only allow the white list through.
def product_params
  params.require(:product).permit(:title, :description, :price_usd, :price_eu, :image, :category_id, :stock_quantity, :label_id, :query, :slug)
end
end

Answer 1

我建議使用類似jQuery文件上傳的方法來為您處理文件上傳。

這樣，您的控制器仍然一次只能處理一個文件上傳，盡管您一次可以上傳許多文件，因為每次上傳都是通過Ajax調用單獨處理的。

我嘗試了其他替代方法，但是嘗試一次將多個文件發布到服務器上，則會很快遇到服務器超時問題（尤其是在heroku上）。

這是您可以連接到ActiveAdmin的寶石

https://github.com/tors/jquery-fileupload-rails

讓我知道您是否需要更多的實施幫助。

更新：（請參閱上下文注釋）

這是一些示例代碼，說明了如何在活動管理員中實施該代碼。 我知道它看起來像很多代碼，但是只要逐步進行操作，您就會發現它非常簡單。

產品型號：

class Product < ApplicationRecord
  has_many :photos
end

照片模型：

class Photo < ApplicationRecord
  include ActionView::Helpers

  belongs_to :product
  has_attached_file :image, :styles => { large: "500x500>",thumb: "100x100>" }
  validates_attachment_content_type :image, :content_type => ["image/jpg", "image/jpeg", "image/png", "image/gif"]

  def thumb
    link_to(image_tag(image.url(:thumb)), thumb_url)
  end

  private

  def thumb_url
    Rails.application.routes.url_helpers.admin_product_photo_path(product, self)
  end
end

然后在活動管理員中執行以下操作。

ActiveAdmin產品：

ActiveAdmin.register Product do
  permit_params :title

  form do |f|
    f.inputs do
      f.input :title
    end
    f.actions
   end

  index do
    column :title
    column :images do |product|
      product.photos.map do |photo|
        link_to (image_tag photo.image.url(:thumb)), [:admin, photo.product, photo]
      end.join.html_safe
    end
    actions
  end

  show do
    attributes_table
    panel "Images" do
      div class: "js-product_photos" do
        product.photos.map do |photo|
          link_to (image_tag photo.image.url(:thumb)), [:admin, photo.product, photo]
        end.join.html_safe
      end
      div do
        semantic_form_for [:admin, resource, Photo.new], multipart: true do |f|
          f.inputs do
            f.input :image, as: :file,
                            input_html: {
                              class: 'js-photo_upload',
                              type: "file",
                              name: "photo[image]",
                              multiple: true
                            }
          end
         end
      end
    end
  end
end

請注意表單中定義的html選項。 這就是jQuery上載派生出很多選項的地方。 表單網址也很重要。

我可以在任何地方添加該表單，但是我認為它在產品展示頁面上可以很好地工作。

ActiveAdmin照片：

ActiveAdmin.register Photo do
  belongs_to :product
  permit_params :image

  controller do
    def create
      create! do |format|
        format.json { render :json => {thumb: resource.thumb} }
      end
    end
  end

  show do
    attributes_table do
      row :product
      row :image do |product|
        image_tag product.image.url(:large)
      end
    end
  end
end

最后在active_admin.js.coffee

#= require active_admin/base
#= require jquery-fileupload/basic

$ ->
  $('.js-photo_upload').fileupload dataType: 'json', done: (e, data) ->
    $('.js-product_photos').append data.result.thumb

就是這樣！ 選擇文件后，應立即通過AJAX調用上傳文件。 上傳后，圖片標簽將添加到圖片列表中。 您一次只能選擇一個以上的圖像

這真的只是基本jQuery文件上傳器可以做的事情的表面-在此處了解更多信息。 https://github.com/blueimp/jQuery-File-Upload/wiki/Basic-plugin

僅供參考，我構建的應用程序是Rails 5應用程序，以下是對該示例非常重要的寶石：

gem 'activeadmin', github: 'activeadmin'
gem 'inherited_resources', github: 'activeadmin/inherited_resources'
gem 'devise'
gem 'paperclip', "~> 5.0.0"
gem "jquery-fileupload-rails" 

更新：基於另一個問題

現在您可以上傳圖片了，您可以在產品展示頁面（ show.html.erb ）上顯示它們：

<h1><%= @product.title %></h1>
<% @product.photos.each do |photo| %>
  <%= image_tag(photo.image.url(:large) %>  
<% end %>