Question

我无法通过Jquery File Uploader使用Ruby on Rails将多个文件上传到Amazon S3存储桶。我复制了演示HTML和Javascript，并进行了修改以包含URL和存储桶签名。

但是，每次打开页面时，我都会立即在控制台中收到以下错误：GET https://s3.amazonaws.com/bucket_name 403 (Forbidden)。

当我查看回复的详细信息时，如下所示：

 <?xml version="1.0" encoding="UTF-8"?>
 <Error><Code>AccessDenied</Code><Message>Access Denied</Message>
 <RequestId>7D97B964E747CE5E</RequestId>
 <HostId>J9TNm9/HANJfxzXyjmQ7IAWAsCY5HdFl/OKxTTRSADLpzZ5AVa1nTfC2DWZlg+ppOolGD5fdja0=
 </HostId></Error>

我已尝试执行以下操作来修改存储桶策略，甚至提供完全访问权限并且无法正常工作。我之前也尝试过Heroku S3直接上传教程，所以我知道我的AWS钥匙正在运行。我还能错过什么？

控制器

def new
   @photo = Photo.new
   @s3_direct_post = S3_BUCKET.presigned_post(key: "uploads/photos/#{SecureRandom.uuid}/${filename}", success_action_status: 201, acl: :public_read)
end

HTML

<!-- The file upload form used as target for the file upload widget -->
<form id="fileupload" method="POST" enctype="multipart/form-data">
<!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
<div class="row fileupload-buttonbar">
    <div class="col-lg-7">
        <!-- The fileinput-button span is used to style the file input field as button -->
        <span class="btn btn-success fileinput-button">
            <i class="fa fa-plus"></i>
            <span>Add files...</span>
            <input type="file" name="files[]" multiple>
        </span>
        <button type="submit" class="btn btn-primary start">
            <i class="fa fa-upload"></i>
            <span>Start upload</span>
        </button>
        <button type="reset" class="btn btn-warning cancel">
            <i class="fa fa-ban"></i>
            <span>Cancel upload</span>
        </button>
        <button type="button" class="btn btn-danger delete">
            <i class="fa fa-trash-o"></i>
            <span>Delete</span>
        </button>
        <input type="checkbox" class="toggle">
        <!-- The global file processing state -->
        <span class="fileupload-process"></span>
    </div>
    <!-- The global progress state -->
    <div class="col-lg-5 fileupload-progress fade">
        <!-- The global progress bar -->
        <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
            <div class="progress-bar progress-bar-success" style="width:0%;"></div>
        </div>
        <!-- The extended global progress state -->
        <div class="progress-extended">&nbsp;</div>
    </div>
</div>
<!-- The table listing the files available for upload/download -->
<table role="presentation" class="table table-striped"><tbody class="files"></tbody>  
</table>
</form>

的Javascript

$(function () {
'use strict';

// Initialize the jQuery File Upload widget:
$('#fileupload').fileupload({
    // Uncomment the following to send cross-domain cookies:
    //xhrFields: {withCredentials: true},
    url: '<%= @s3_direct_post.url %>',
    formData: <%= @s3_direct_post.fields.to_json.html_safe %>
});

// Load existing files:
$('#fileupload').addClass('fileupload-processing');
$.ajax({
    // Uncomment the following to send cross-domain cookies:
    //xhrFields: {withCredentials: true},
    url: $('#fileupload').fileupload('option', 'url'),
    dataType: 'json',
    context: $('#fileupload')[0]
}).always(function () {
    $(this).removeClass('fileupload-processing');
}).done(function (result) {
    $(this).fileupload('option', 'done')
        .call(this, $.Event('done'), {result: result});
});
});

Amazon S3直接上传Ruby on Rails JQuery File Uploader

0 个答案: