Question

我花了几天时间试图完成这项工作。我收到此错误

选项https://bucketname.s3.oregon.amazonaws.com/ net :: ERR_NAME_RESOLUTION_FAILED

我正在使用gem "jquery-fileupload-rails" gem 'aws-sdk'

的Gemfile：

//= require jquery-fileupload/basic

application.js（在jquery之后）：

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

application.css：

rails generate scaffold Upload upload_url:string

我有一个名为uploads的模型，我已经生成了这样的脚手架：

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

uploads_controller.rb：

<%= 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 %>

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

$( 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");
          }
        });
      });
    });
    });

application.js（最后）：

{{1}}

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

Answer 1

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

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

查看[Description("Checked Command"), Category("Common Properties")] public ICommand CheckedCommand { get { return (ICommand)this.GetValue(CheckedCommandProperty); } set { this.SetValue(CheckedCommandProperty, value); } } public static readonly DependencyProperty CheckedCommandProperty = DependencyProperty.Register( "CheckedCommand", typeof(ICommand), typeof(ToggleTextButton));文档并检查您的环境变量以获得该网址。

Answer 2

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

虽然这是我在物业中所看到的（它表示地区：俄勒冈州），但我必须使用＆＃34; us-west-2＆＃34;根据这个Amazon region documentation

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 Amazon S3使用JQuery File Uploader直接上传

2 个答案: