我正在尝试按照以下说明在我的应用程序上实现直接上传到amazonS3的方法:https ://devcenter.heroku.com/articles/direct-to-s3-image-uploads-in-rails
我已经在S3上创建了一个存储分区并下载了凭据。在学习完本教程之后,我将一个初始化程序添加到了我的rails应用程序中:
Aws.config.update({
region: 'Ireland',
credentials: Aws::Credentials.new(ENV['AWS_ACCESS_KEY_ID'], ENV['AWS_SECRET_ACCESS_KEY']),
})
S3_BUCKET = Aws::S3::Resource.new.bucket(ENV['S3_BUCKET'])
我在我的hotel_controller上设置了一个before_action:
before_action :set_s3_direct_post, only: [:new, :edit, :create, :update]
private
def set_s3_direct_post
@s3_direct_post = S3_BUCKET.presigned_post(key: "uploads/#{SecureRandom.uuid}/${filename}", success_action_status: '201', acl: 'public-read')
end
并且我已经使用适当的JS自定义了表单:
<%= form_for(@hotel, url: account_hotels_path(params[:account_id]), html: { class: 'directUpload', data: { 'form-data' => (@s3_direct_post.fields), 'url' => @s3_direct_post.url, 'host' => URI.parse(@s3_direct_post.url).host } }) do |f| %>
<%= f.hidden_field :account_id, :value => params[:account_id] %>
<div class="form-group">
<%= f.label :city %>
<%= f.text_field :city %>
</div>
<div class="form-group">
<%= f.label :postcode %>
<%= f.text_field :postcode %>
</div>
<div class="form-group">
<%= label_tag "Number of rooms" %>
<%= number_field_tag "room_number"%>
</div>
<div class="form-group">
<%= label_tag "Number of Beds in each room" %>
<%= number_field_tag "bed_number"%>
</div>
<div class="field">
<%= f.label "Photo" %><br>
<%= f.file_field "photo[image_url]" %>
</div>
<div class="form-group">
<%= f.submit %>
</div>
<% end %>
<% content_for(:after_js) do %>
<script>
$('.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);
console.log(form);
console.log(form.data('form-data'));
console.log(form.data('url'));
console.log(fileInput)
fileInput.fileupload({
fileInput: fileInput,
url: form.data('url'),
type: 'POST',
autoUpload: true,
formData: form.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();
var url = '//' + form.data('host') + '/' + key;
// 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");
}
});
});
</script>
<% end -%>
我还按照教程中的建议更改了存储桶的CORS SETTINGS。
但是,每次我开始上传文件时,请求都会失败,我得到:
query.self-c64a74367bda6ef8b860f19e74df08927ca99d2be2ac934e9e92d5fd361e0da4.js?body=1:10244 OPTIONS https://quickbed.s3.ireland.amazonaws.com/ net::ERR_NAME_NOT_RESOLVED
和
这是怎么了?
Ireland
在您需要的意义上,这不是有效的区域...这是区域端点。
您正在寻找eu-west-1
。
http://docs.aws.amazon.com/general/latest/gr/rande.html#s3_region
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句