Rails：回形针和预览？

Posted 2023-02-25

【中文标题】Rails：回形针和预览？

【英文标题】：Rails: Paperclip & previews?

【发布时间】：2010-02-09 19:43:28

【问题描述】：

您知道，在某些网站上，当您被要求上传头像时，您点击按钮，选择文件，然后点击确定，但在您提交页面之前（如中，没有创建/更新记录），图像的小预览显示？

我将如何使用 Paperclip for Rails 完成此操作？

任何可以向我指出教程或可能告诉我如何在保存记录之前对图像进行 javascript 裁剪的人的奖励积分。

我无法在 Google 上找到很多关于此主题的信息...感谢您的帮助！

【参考方案1】：

从 Rails 的角度来看，这种事情是有问题的，因为图像上传的工作方式。使其更好地工作的一种策略是：

为您的图片上传制作一个子表单，可能使用swfupload 使其更加精简。 创建一个模型来接收您的上传，其中包括一些用于检索和链接它的随机访问密钥。回形针处理附加文件。 当子表单完成时，使用 AJAX 填充您的主表单，方法是插入一个隐藏字段，或者可能是具有适当唯一键的可见复选框元素。

典型的模型如下所示：

class Avatar < ActiveRecord::Base
  has_attached_file :image
  # ... Additional Paperclip options here

  before_validation :assign_unique_key

  belongs_to :user

  def to_param
    self.unique_key
  end

protected
  def assign_unique_key
    return if (self.unique_key.present?)

    self.unique_key = Digest::SHA1.hexdigest(ActiveSupport::SecureRandom.random_number(1<<512).to_s)
  end
end

unique_key 字段的原因是您可以将其链接到可能未保存的记录的形式。将其放入 URL 时使用 unique_key 而不是 id 是有利的，因为在上传时很难判断用户是否应该能够看到这张图片，因为可能尚未分配所有者用户。

这还可以防止好奇的人更改您 URL 中某种顺序的、容易猜到的 ID 并查看其他已上传的头像。

此时您可以像检索任何模型一样检索 Avatar 的最终调整大小的缩略图 URL。

您可以轻松去除收据上的参数并转换回头像 ID 号：

# If an avatar_id parameter has been assigned...
if (params[:user][:avatar_id])
  # ...resolve this as if it were a unique_key value...
  avatar = Avatar.find_by_unique_key(params[:user][:avatar_id])
  # ...and repopulate the parameters if it has been found.
  params[:user][:avatar_id] = (avatar && avatar.id)
end

# ... params[:user] used as required for create or update

随着人们上传和重新上传图像，您最终将拥有大量没有在任何地方实际使用的孤立记录。在经过一段合理的时间后，编写一个 rake 任务来清除所有这些是很简单的。例如：

task :purge_orphan_avatars => :environment do
  # Clear out any Avatar records that have not been assigned to a particular
  # user within the span of two days.
  Avatar.destroy_all([ 'created_at<? AND user_id IS NULL', 2.days.ago ])
end

使用destroy_all 应该也有清除所有回形针材料的效果。

【参考方案2】：

我发现here 发布的解决方案很有用，您只需将其修改为只有一个文件（如果您正在执行单个文件上传）：

<%= image_tag @upload.image, id:"something_unique"%>
<div class="row">
  <%= form_for @upload, :html =>  :multipart => true  do |f| %>
    <%= f.file_field :image, id:"something_else_unique" %>
    <%= f.submit "Add photo" %>
  <% end %>
</div>

<script>
  function handleFileSelect(evt) 
    var files = evt.target.files; // FileList object
      f=files[0]
      // Only process image files.
      if (f.type.match('image.*')) 
        var reader = new FileReader();
        reader.onload = (function(theFile) 
          return function(e) 
            // alert(e.target.result);
            document.getElementById("something_unique").src=e.target.result;
          ;
        )(f);

      // Read in the image file as a data URL.
      reader.readAsDataURL(f);
      
    
  document.getElementById('something_else_unique').addEventListener('change', handleFileSelect, false);
</script>

注意：我为回形针使用了一个单独的模型，一个具有图像属性的上传模型。您可以在图片预览标签中添加样式以格式化图片大小（否则将是原始大小）。

【参考方案3】：

或者你可以使用 ajax 和 iframe http://www.html5rocks.com/en/tutorials/file/dndfiles/#toc-reading-files