Rails亞馬遜S3使用JQuery File Uploader直接上傳

Question

我花了幾天的時間嘗試做這項工作。我收到此錯誤

選項https://bucketname.s3.oregon.amazonaws.com/網:: ERR_NAME_RESOLUTION_FAILED

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

的Gemfile：

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

我發現這個問題。由於很多felixbuenemann a collaborator in jquery-fileupload-rails

雖然這是我在屬性看（它說地區：俄勒岡州），我必須使用本Amazon region documentation

「美西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 

Answer 2

我的猜測是，你已經錯誤地配置您的存儲桶名稱/路線。錯誤來自亞馬遜，警告你沒有DNS路由到https://bucketname.s3.oregon.amazonaws.com/。

在我看來，你需要實際bucketname設置爲您鬥名，也下降俄勒岡從URL。鑑於你的水桶被命名爲aymansalah，網址爲：https://aymansalah.s3.amazonaws.com/

審查Aws::Credentials文件，並檢查你的環境變量來實現該URL。