尝试直接将文件上传到Amazon S3存储桶时请求失败

大卫·盖斯玛(David Geismar)

我正在尝试按照以下说明在我的应用程序上实现直接上传到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

在此处输入图片说明

这是怎么了?

迈克尔-SQLbot

Ireland 在您需要的意义上,这不是有效的区域...这是区域端点。

您正在寻找eu-west-1

http://docs.aws.amazon.com/general/latest/gr/rande.html#s3_region

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

尝试将文件从 lambda tmp 文件夹上传到 s3 存储桶

直接从网址将文件上传到S3存储桶

php laravel直接将文件上传到AWS S3存储桶

尝试在其中保存matplotlib饼图时将空文件上传到S3存储桶

如何使用axios将文件上传到Amazon S3存储桶?

使用boto将csv文件上传到Amazon S3存储桶

无法在eclipse中使用localhost将文件上传到Amazon S3存储桶

使用 PHP 将文件上传到 Amazon S3 存储桶 - 不使用 SDK

在Python中使用ARN iam将文件上传到Amazon s3存储桶

尝试将文件上传到Amazon S3时返回错误代码400

将文件上传到S3存储桶

Boto3在将文件上传到S3存储桶时遇到问题

如何使用表单数据直接将多个文件上传到Amazon S3?

直接使用php将文件上传到Amazon s3

Laravel cURL 错误 28,将文件上传到 aws s3 存储桶时

是否可以将文件直接上传到s3存储桶而无需重定向?

我的Amazon S3存储桶网址是什么?如何将许多文件上传到s3存储桶?

如何安全地将大文件从浏览器上传到 Amazon S3 上的存储桶?

将屏幕快照从AWS lambda上传到s3存储桶失败

您尝试访问的存储桶必须使用指定的终结点进行寻址将文件上传到AWS S3

每当我尝试将文件上传到s3存储桶时,都会收到403禁止错误。(PHP,SDK)

尝试上传到 s3 存储桶时被拒绝访问

当我尝试将文件复制到 aws S3 存储桶时,Jenkins 作业失败

Amazon S3:`key` 是上传到存储桶的对象而不是文件

在AWS S3存储桶上上传失败的通知

从Amazon S3存储桶打开文件时出错

文件未上传到s3存储桶

将文件上传到Amazon S3

使用NodeJS将文件上传到Amazon S3