Rails 使用 JQuery 文件上传器直接上传 Amazon S3

Question

我已经花了好几天时间来尝试完成这项工作。我收到此错误

OPTIONS https://bucketname.s3.oregon.amazonaws.com/ net::ERR_NAME_RESOLUTION_FAILED

我正在使用 Version 43.0.2357.130 Ubuntu 14.04 (64-bit)

宝石文件：

gem "jquery-fileupload-rails"
gem 'aws-sdk'

application.js（在jquery之后）：

//= require jquery-fileupload/basic

application.css:

 *= require jquery.fileupload
 *= require jquery.fileupload-ui

我有一个名为上传的模型，我已经为它生成了脚手架：

rails generate scaffold Upload upload_url:string

uploads_controller.rb:

def new
  @s3_direct_post = Aws::S3::PresignedPost.new(Aws::Credentials.new(ENV['AWS_S3_ACCESS_KEY_ID'], ENV['AWS_S3_SECRET_ACCESS_KEY']), 
                                                "Oregon", ENV['AWS_S3_BUCKET'], {
                                                key: '/uploads/object/test.test',
                                                content_length_range: 0..999999999,
                                                acl: 'public-read',
                                                success_action_status: "201",
                                              })
  @upload = Upload.new
end

_form.html.erb（对于上传）：

<%= form_for(@upload, html: { class: "directUpload" }) do |f| %>
......
<div class="field">
  <%= f.label :upload_url %><br>
  <%= f.file_field :upload_url %>
</div>
......
<%= content_tag "div", id: "upload_data", data: {url: @s3_direct_post.url, form_data: @s3_direct_post.fields } do %>
<% end %>

application.js（最后）：

$( document ).ready(function() {
        $(function() {
      $('.directUpload').find("input:file").each(function(i, elem) {
        var fileInput    = $(elem);
        var form         = $(fileInput.parents('form:first'));
        var submitButton = form.find('input[type="submit"]');
        var progressBar  = $("<div class='bar'></div>");
        var barContainer = $("<div class='progress'></div>").append(progressBar);
        fileInput.after(barContainer);
        fileInput.fileupload({
          fileInput:       fileInput,
          url:             $('#upload_data').data('url'),
          type:            'POST',
          autoUpload:       true,
          formData:         $('#upload_data').data('form-data'),
          paramName:        'file', // S3 does not like nested name fields i.e. name="user[avatar_url]"
          dataType:         'XML',  // S3 returns XML if success_action_status is set to 201
          replaceFileInput: false,
          progressall: function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            progressBar.css('width', progress + '%')
          },
          start: function (e) {
            submitButton.prop('disabled', true);

            progressBar.
              css('background', 'green').
              css('display', 'block').
              css('width', '0%').
              text("Loading...");
          },
          done: function(e, data) {
            submitButton.prop('disabled', false);
            progressBar.text("Uploading done");

            // extract key and generate URL from response
            var key   = $(data.jqXHR.responseXML).find("Key").text();

            // create hidden field
            var input = $("<input />", { type:'hidden', name: fileInput.attr('name'), value: url })
            form.append(input);
          },
          fail: function(e, data) {
            submitButton.prop('disabled', false);

            progressBar.
              css("background", "red").
              text("Failed");
          }
        });
      });
    });
    });

说真的我该怎么做才能解决这个问题？

Answer 1

我的猜测是您错误配置了存储桶名称/路由。错误来自 Amazon，警告您没有到 https://bucketname.s3.oregon.amazonaws.com/ 的 DNS 路由。

在我看来，您需要将实际的存储桶名称设置为您的 存储桶名称 ，并从 [=25] 中删除 oregon =].鉴于您的存储桶名为 aymansalah，url 将是：https://aymansalah.s3.amazonaws.com/

查看 Aws::Credentials 文档并检查您的环境变量以实现 URL。

Answer 2

我发现了问题。非常感谢 felixbuenemann a collaborator in jquery-fileupload-rails

虽然这是我在属性中看到的（它说区域：俄勒冈），但我必须根据这个 Amazon region documentation

使用 "us-west-2"

uploads_controller.rb 现在是：

def new
  @s3_direct_post = Aws::S3::PresignedPost.new(Aws::Credentials.new(ENV['AWS_S3_ACCESS_KEY_ID'], ENV['AWS_S3_SECRET_ACCESS_KEY']), 
                                                "us-west-2", ENV['AWS_S3_BUCKET'], {
                                                key: '/uploads/object/test.test',
                                                content_length_range: 0..999999999,
                                                acl: 'public-read',
                                                success_action_status: "201",
                                              })
  @upload = Upload.new
end

Rails 使用 JQuery 文件上传器直接上传 Amazon S3

Rails Amazon S3 direct upload with JQuery File Uploader

ruby-on-rails

amazon-web-services

amazon-s3

jquery-file-upload

pre-signed-url