使用 Formtastic 和 ActiveAdmin 输入图像文件答案

【问题标题】：Image file input with Formtastic and ActiveAdmin使用 Formtastic 和 ActiveAdmin 输入图像文件
【发布时间】：2011-08-16 16:36:33
【问题描述】：

我开始使用 formstatic 但我需要创建一个带有图像预览的文件字段。我的意思是，当我编辑一个对象时，我想查看已经链接的图像。

我该怎么做？

谢谢！

【问题讨论】：

标签： ruby-on-rails ruby forms formtastic activeadmin

【解决方案1】：

答案是使用提示属性：

ActiveAdmin.register Event do
  form :html => { :enctype => "multipart/form-data" } do |f|
    f.input :map, :as => :file, :hint => f.template.image_tag(f.object.map.url(:thumb))
  end
end

再见

【讨论】：

我可能会补充一点，当 Event 没有地图时，它会在地图上调用 url 方法失败。这将防止错误：f.input :map, :as => :file, :hint => f.object.map.nil? ? f.template.content_tag(:span, "no map yet") : f.template.image_tag(f.object.map.url(:thumb))
为了为我工作，我不得不使用 f.object.new_record?: f.input :map, :as => :file, :hint => ( f.object.new_record? || f .object.map.nil？）？ f.template.content_tag(:span, "还没有照片") : f.template.image_tag(f.object.map.url(:thumb))
为什么要使用 f.template.image_tag 而不是 jsut image_tag？
此方法可以使用删除文件选项
在AA的当前版本中form(html: { multipart: true })足以设置enctype属性。

【解决方案2】：

将paperclip 与formtastic 一起使用

Formtasitc 的github page 提到它支持回形针：

:file – 文件字段。文件附件属性匹配的默认值：paperclip 或 attachment_fu。

以下是一些有用的截屏视频，可以帮助您继续前进：

Paperclip

Cropping images

编辑：

要在 ActiveAdmin 中的网格列中显示图像，您需要创建一个自定义列（这是未经测试的，可能存在缺陷，我从 documentation 推断出这一点）：

index do
    column "Title" do |post| 
        link_to image_tag("path to file", :alt => "post image"), admin_post_path(post)
    end
end

【讨论】：

是的，我明白了，但我需要的是我的后端。我使用 ActiveAdmin，所以我不自己编写表单。你在后端使用回形针吗？
我对我的答案进行了编辑。根据文档，您可以自定义网格，请参阅Customizing the Index Page 部分。
您能用表单代码更新您的问题吗？一旦我看到它，我应该能够帮助您将图像添加到其中。

【解决方案3】：

两个 Gems 和一个插件可以帮助您解决问题：

请务必查看：

宝石：

回形针：https://github.com/thoughtbot/paperclip

PaperClip 上的 RailsCast：http://railscasts.com/episodes/134-paperclip

CarrierWave：https://github.com/carrierwaveuploader/carrierwave

CarrierWave 上的 RailsCast：http://railscasts.com/episodes/253-carrierwave-file-uploads

Jquery 文件上传：https://github.com/blueimp/jQuery-File-Upload

Jquery 文件上传 RailsCast：http://railscasts.com/episodes/381-jquery-file-upload （需要 RailsCast 专业帐户）

【讨论】：

【解决方案4】：

正如@ianpetzer 所说，在 Rails 4.2 / ActiveAdmin master 中，当前答案也会导致对象引用被写出。 2016年的正确答案应该和这个answer类似：

form :html => { :multipart => true } do |f|
    f.inputs do
        #...
        f.input :image, required: false, hint: image_tag(object.image.url(:medium)).html_safe
        #...
    end
end

【讨论】：