Question

在我的rails应用中，我尝试将文件上传到AWS s3。我按照本教程https://devcenter.heroku.com/articles/direct-to-s3-image-uploads-in-rails进行了操作。我使用aws-sdk gem和jQuery文件上传插件上传文件。在我的应用程序中，我有一个具有两个属性的资源：名称和文件，文件是一个字符串。当文件上传到S3存储桶时，URL将被保存到我的数据库中。

但是当我尝试在我的应用程序中上传文件时，它将其保存到我的数据库：＃\ u003cActionDispatch :: Http :: UploadedFile：0x007fa212ad40b0 \ u003e ，而不是保存文件的链接从它存储在AWS S3中的位置。

这是我的控制器中与上传文件有关的代码。：

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

我的表单中用于文件上传的代码只是一个带有文件上传字段的简单视图。

我用来上传文件的javascript代码是：

$(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:             '<%= @s3_direct_post.url %>',
      type:            'POST',
      autoUpload:       true,
      formData:         <%= @s3_direct_post.fields.to_json.html_safe %>,
      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   = '//<%= @s3_direct_post.url.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"); }});});});

如果你能帮助我，那就太好了！如果您需要查看其他任何代码，请询问。

使用Javascript将文件上传到AWS s3

0 个答案: