S3從瀏覽器上載帶有預簽名url的圖片

我試圖從瀏覽器上傳數據到s3存儲桶。我已經生成了預先簽名的url，但是我得到了403禁止的回覆。S3從瀏覽器上載帶有預簽名url的圖片

我的服務器代碼是

const s3 = new AWS.S3({ 
    accessKeyId: settings.resourceBucketKey, 
    secretAccessKey: settings.resourceBucketSecret, 
    region: 'eu-west-1' 
}) 

const params = { 
    Bucket: 'my-bucket', 
    Key: 'photo.png', 
    ContentType: 'image/png', 
    ACL: 'authenticated-read', 
} 

const url = s3.getSignedUrl('putObject', params) 

console.log(url)

我的客戶端代碼（使用生成的URL）

const input = $('#myinput') 

     input.on('change', (res) => { 
     var theFormFile = $('#myinput').get()[0].files[0]; 

     $.ajax({ 
      url: url, 
      type: 'PUT', 
      contentType: 'image/png', 
      processData: false, 
      data: theFormFile, 
     }).success(function(){ 
      alert('success') 
     }) 
     }, false)

我已經設置CORS上的水桶：

<?xml version="1.0" encoding="UTF-8"?> 
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/"> 
    <CORSRule> 
     <AllowedOrigin>*</AllowedOrigin> 
     <AllowedMethod>GET</AllowedMethod> 
     <AllowedMethod>PUT</AllowedMethod> 
     <AllowedMethod>POST</AllowedMethod> 
     <AllowedHeader>*</AllowedHeader> 
    </CORSRule> 
</CORSConfiguration>

但我的答覆仍然被禁止。我想上傳的圖片叫'photo.png'。我在這裏錯過了什麼嗎？

來源

2016-09-16 wazzaday

預簽名URL的創建者（您）必須具有訪問S3存儲區才能上傳文件的權限。這是多在S3 documentation雄辯地說明：

預標識的URL，您可以訪問的URL標識的對象，提供的預標識的URL的創建者有權訪問該對象。也就是說，如果您收到一個預先簽名的URL以上傳對象，則只有在預簽名URL的創建者具有上載該對象所需的權限時，才能上傳該對象。

確保創建預簽名URL的IAM用戶具有必要的權限。

來源

2016-09-18 20:55:30 jbird

謝謝你正是這個問題！ – wazzaday

完全實現從瀏覽器獲取已簽名的url - 享受！

<body> 
    <img height="200" width="200"> 
    <script> 

    var mimes = { 
     'jpeg': 'data:image/jpeg;base64,' 
    }; 

     AWS.config.update({ 
      signatureVersion: 'v4', 
      region: 'us-east-1', 
      accessKeyId: '', 
      secretAccessKey: '' 
     }); 

     var bucket = new AWS.S3({params: {Bucket: 'xxxx'}}); 

     function encode(data) 
     { 
      var str = data.reduce(function(a,b){ return a+String.fromCharCode(b) },''); 
      return btoa(str).replace(/.{76}(?=.)/g,'$&\n'); 
     } 

     function getUrlByFileName(fileName,mimeType) { 
      return new Promise(
       function (resolve, reject) { 
        bucket.getObject({Key: fileName}, function (err, file) { 
         var result = mimeType + encode(file.Body); 
         resolve(result) 
        }); 
       } 
     ); 
     } 

     function openInNewTab(url) { 
      var redirectWindow = window.open(url, '_blank'); 
      redirectWindow.location; 
     } 

     getUrlByFileName('sprites.png', mimes.jpeg).then(function(data) { 
      //openInNewTab(data); 
      document.querySelector('img').src = data; 
     }); 

    </script> 
</body>

來源

2018-01-10 15:23:09

不要忘記添加 - –

S3從瀏覽器上載帶有預簽名url的圖片

回答

相關問題