Question

我在Rails 3应用程序中使用Railscast＃383（http://railscasts.com/episodes/383-uploading-to-amazon-s3）的Jquery多文件上传器的修改版本，我需要调整它以便检查文件是否已存在于S3，如果是的话，跳过重新上传。

一些背景知识：我的用户需要更新大块数据。例如，可以选择500个4MB文件进行上传。不可避免地，他们的互联网连接中断了，而不是期望用户弄清楚上传了哪些文件，哪些没有，我希望他们能够选择那些相同的500个文件，并且应用程序足够聪明，不能再次启动一开始。

最优选的解决方案是在S3 POST中包含一个不覆盖现有文件的选项。接下来最优选的是将GET激活到S3以查看文件是否存在并且如果是则跳过它。

最好，我已经实现了一个非异步激发GET到我的Rails应用程序的解决方案（因为我在每次上传完成后创建了一个数据库条目），但我似乎遇到了限制这些请求的问题，而且我的用户说她的浏览器一直在崩溃（我猜它一下子就完成了500次）。

相关application.js

//= require jquery
//= require jquery_ujs
//= require jquery.ui.all
//= require jquery-fileupload/basic
//= require jquery-fileupload/vendor/tmpl

我的表格：

<%= s3_uploader_form post: uploaded_photos_path, as: "uploaded_photo[image_url]", photo_shoot_id: @photo_shoot.id do %>
  <%= file_field_tag :file, multiple: true %>
  <%= button_tag 'Upload Photos', id: 'upload_photo_button', type: 'button' %>
<% end %>

我的javascript：

$(function() {
  $('#s3_uploader').fileupload({
    limitConcurrentUploads: 5,
    add: function(e, data) {
      var file, record_exists, photo_check_url;
      file = data.files[0];
      photo_check_url = "/my_route/has_photo_been_uploaded/" + encodeURIComponent(file.name)

      // THIS IS MY NON-THROTTLING HACK THAT NEEDS REPLACEMENT/IMPROVEMENT
      // THE CONTROLLER THAT HANDLES THE REQUEST JUST RENDERS AN INLINE STRING OF 'true' OR 'false'
      $.ajax( {
        url: photo_check_url, 
        async: false, 
        success: function (result) { 
          record_exists = result;
        }
      });
      if (record_exists == 'false') {
        data.context = $(tmpl("template-upload", file));
        $('#s3_uploader').append(data.context);
        data.submit();          
      }
    },
    progress: function(e, data) { // irrelevant },
    done: function(e, data) { // irrelevant. It posts the object to my database }
    },
    fail: function(e, data) { // irrelevant }
  });
});

我的助手：

module S3UploaderHelper

  def s3_uploader_form(options = {}, &block)
    uploader = S3Uploader.new(options)
    form_tag(uploader.url, uploader.form_options) do
      uploader.fields.map do |name, value|
        hidden_field_tag(name, value)
      end.join.html_safe + capture(&block)
    end
  end

  class S3Uploader

    def initialize(options)
      @options = options.reverse_merge(
        id: "s3_uploader",
        aws_access_key_id: ENV["S3_ACCESS_KEY"],
        aws_secret_access_key: ENV["S3_SECRET_ACCESS_KEY"],
        bucket: S3_BUCKET_NAME,
        acl: "private",
        expiration: 10.hours.from_now.utc,
        max_file_size: 20.megabytes,
        as: "file"
      )
    end

    def form_options
      {
        id: @options[:id],
        method: "post",
        authenticity_token: false,
        multipart: true,
        data: {
          post: @options[:post],
          as: @options[:as]
        }
      }
    end

    def fields
      {
        :key => key,
        :acl => @options[:acl],
        :policy => policy,
        :signature => signature,
        "AWSAccessKeyId" => @options[:aws_access_key_id],
      }
    end

    def key
      @key ||= "uploaded_photos/${filename}"
    end

    def url
      "https://#{@options[:bucket]}.s3.amazonaws.com/"
    end

    def policy
      Base64.encode64(policy_data.to_json).gsub("\n", "")
    end

    def policy_data
      {
        expiration: @options[:expiration],
        conditions: [
          ["starts-with", "$utf8", ""],
          ["starts-with", "$key", ""],
          ["content-length-range", 0, @options[:max_file_size]],
          {bucket: @options[:bucket]},
          {acl: @options[:acl]}
        ]
      }
    end

    def signature
      Base64.encode64(
        OpenSSL::HMAC.digest(
          OpenSSL::Digest::Digest.new('sha1'),
          @options[:aws_secret_access_key], policy
        )
      ).gsub("\n", "")
    end
  end
end

Answer 1

在了解了有关AJAX的更多信息之后（在我的第二条评论中发现它之后），看起来可接受的解决方案确实是使AJAX调用异步并将S3 POST代码置于其成功回调中。这解决了我的浏览器无响应问题。

$.ajax( {
  url: my_route_to_ask_if_photo_was_already_uploaded, 
  success: function (result) { 
    if (result == 'false') {
      // ...other code
      data.submit();          
    }
  });

避免使用Jquery-Fileupload覆盖S3文件

1 个答案: