Question

您好我希望能够通过以下代码为product上传多张图片，而不只是上传一张图片。

我不确定如何管理我的客户请求，因为我在没有经验的情况下使用active admin和paperclip

我已经google了一下并查看了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 %>

使用回形针/活动管理员上传多个图片

1 个答案: