設置內容類型，同時加載圖像到aws s3

我想爲我的第一個應用程序使用這個heroku教程（https://devcenter.heroku.com/articles/direct-to-s3-image-uploads-in-rails）。我已經花了一個星期的時間對這個複雜的過程進行細節分析，並且在這個過程中已經失去了大部分剩餘的頭髮。然而，在上傳我的頭像時最後一點設置內容類型仍然存在。設置內容類型，同時加載圖像到aws s3

我試過在stackoverflow（Setting the Content-Type in direct to S3 upload using Rails and jQuery File Upload）上的帖子在上傳到aws之前設置文件的content_type，但是當我嘗試這樣做時我得到了403禁止的錯誤。你能給些建議麼。？在沒有上述改變的情況下加載的默認內容類型是二進制/八進制流。

AWS.rb給出

AWS.config(access_key_id:  ENV['AWS_ACCESS_KEY_ID'], 
secret_access_key: ENV['AWS_SECRET_ACCESS_KEY']) 

S3_BUCKET = AWS::S3.new.buckets[ENV['S3_BUCKET']]

用戶控制器具有預簽名後

@s3_direct_post = S3_BUCKET.presigned_post(key: "uploads/#{SecureRandom.uuid}/${filename}", success_action_status: 201, acl: :public_read).where(:content_type).starts_with("")

腳本在新用戶的形式在下面給出 -

   <script> 
$(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 = $("<br><div class='bar'></div>"); 
    var barContainer = $("<div class='progress'></div>").append(progressBar); 
    var fd   = <%= @s3_direct_post.fields.to_json.html_safe %>; 
    fileInput.after(barContainer); 
    fileInput.fileupload({ 
    fileInput:  fileInput, 
    url:    '<%= @s3_direct_post.url %>', 
    type:   'POST', 
    autoUpload:  true, 
    formData:   fd, 
    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, 
    limitMultiFileUploads: 1, 
    maxFileSize: 999000, 
    acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i, 

    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"); 
    }, 
    add: function (e, data) { 
     fd["Content-Type"] = data.files[0].type; 
    data.formData = fd; 
    data.submit(); 
    } 


    }); 
}); 
}); 

</script>

I」我也試過設置aws桶策略失敗，但沒有幫助 -

{ 
"Statement": [ 
    { 
     "Principal": "*", 
     "Sid": "AllowPublicRead", 
     "Action": [ 
      "s3:ListBucket", 
      "s3:GetObject", 
      "s3:PutObject", 
      "s3:PutObjectAcl", 
      "s3:DeleteObject" 
     ], 
     "Effect": "Allow", 
     "Resource": [ 
      "arn:aws:s3:::bucket-name/*", 
      "arn:aws:s3:::bcuket-name" 
     ] 
    } 
] 
}

任何指針都會有幫助！ TIA！ TIA！

來源

2015-08-23 pari

這個問題很嘈雜，但我沒有看到你在哪裏產生必要的''（或者任何內容類型應該是）。這是嗎？ –

如果您得到403表示POST請求被拒絕。你應該允許POST爲你的桶。

此刻你不允許POST。我通常CORS配置做到這一點：

<CORSConfiguration> 
    <CORSRule> 
     <AllowedOrigin>*</AllowedOrigin> 
     <AllowedMethod>POST</AllowedMethod> 
     <AllowedMethod>GET</AllowedMethod> 
     <MaxAgeSeconds>3000</MaxAgeSeconds> 
     <AllowedHeader>Authorization</AllowedHeader> 
    </CORSRule> 
</CORSConfiguration>

您可能需要原產地改變自己的域名，以防止來自其他來源的請求。

來源

2015-08-23 12:34:11

403 Forbidden！= CORS問題。 –

我沒有說這是CORS問題 –

您的答案是更改CORS配置。如果這在過去「固定」了非CORS問題，那麼返回並重新評估這些情況可能是一個好主意，因爲這不應該改變實際的存儲桶或用戶策略權限。 –

對不起。我找出了這個問題。對於其他遇到這篇文章的人來說，我在原始文章中提供的代碼應該像沒有存儲桶策略那樣工作。我還想在我正在測試的代碼中添加：function（e，data）{}，這是在做其他一些文件類型檢查，並且是真正的罪魁禍首。

Michael - 正在使用add：callback函數設置內容類型。

盧卡斯穆扎克 - 我有同樣的CORS設定..

反正感謝您的幫助！

來源

2015-08-24 09:46:17 pari

由於某種原因，我無法編輯我的答案。我只是想添加我的回答，我的原帖中的存儲桶策略並不是使代碼正常工作所必需的。 – pari

設置內容類型，同時加載圖像到aws s3

回答

相關問題