0

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

一些背景知识：我的用户需要更新大量数据。例如，可以选择 500 个 4MB 的文件进行上传。不可避免地，他们的互联网连接中断了，我希望他们能够选择那些相同的 500 个文件，并且应用程序足够聪明，不会在一开始。

最可取的解决方案是在 S3 POST 中包含一个选项，表示不覆盖现有文件。接下来最可取的是向 S3 发出 GET 以查看文件是否存在，如果存在则跳过它。

最不理想的是，我已经实现了一个解决方案，该解决方案以非异步方式向我的 Rails 应用程序触发 GET（因为我在每次上传完成后创建一个数据库条目），但我似乎在限制这些请求时遇到了问题，而且我的用户说她的浏览器一直在崩溃（我猜它一次会崩溃 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
4

1 回答 1

0

在了解了有关 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();          
    }
  });
于 2013-10-03T20:13:58.157 回答