如何使用流星將圖像從FileReader上傳到Amazon s3

Question

我試圖用流星將圖像上傳器構建到Amazon S3。感謝Hubert OG，Ive發現了AWS-SDK，讓事情變得簡單。

我的問題是，上傳的數據似乎是腐敗的。它說，當我下載文件時，該文件可能已損壞。可能是。

將數據插入圖像src中，確實有效，並且圖像的預覽顯示爲原樣，所以原始文件和數據可能是正確的。

我正在用FileReader加載文件，並將結果數據傳遞給AWS-SDK putObject方法。

 var file=template.find('[type=file]').files[0]; 
     var key="uploads/"+file.name; 

     var reader=new FileReader(); 
     reader.onload=function(event){ 
      var data=event.target.result; 
      template.find('img').src=data; 
      Meteor.call("upload_to_s3",file,"uploads",reader.result); 
     }; 

     reader.readAsDataURL(file); 

，這是在服務器上的方法：

"upload_to_s3":function(file,folder,data){ 
     s3 = new AWS.S3({endpoint:ep}); 
     s3.putObject(
      { 
       Bucket: "myportfoliositebucket", 
       ACL:'public-read', 
       Key: folder+"/"+file.name, 
       ContentType: file.type, 
       Body:data 
      }, 
      function(err, data) { 
       if(err){ 
        console.log('upload error:',err); 
       }else{ 
        console.log('upload was succesfull',data); 
       } 
      } 
     ); 
    } 

Answer 1

主體應該被轉換到緩衝器 - 見the documentation。因此而不是Body: data你應該有Body: new Buffer(data, 'binary')。

Answer 2

我包的NPM模塊作爲智能包裝在這裏找到：https://atmosphere.meteor.com/package/s3policies

有了它，你可以做一個流星方法返回一個寫入策略，並根據該政策，你可以使用Ajax調用上傳到S3。

實施例：

Meteor.call('s3Upload', name, function (error, policy) { 
    if(error) 
     onFinished({error: error}); 
    var formData = new FormData(); 
    formData.append("AWSAccessKeyId", policy.s3Key); 
    formData.append("policy", policy.s3PolicyBase64); 
    formData.append("signature", policy.s3Signature); 

    formData.append("key", policy.key); 
    formData.append("Content-Type", policy.mimeType); 
    formData.append("acl", "private"); 
    formData.append("file", file); 

    $.ajax({ 
     url: 'https://s3.amazonaws.com/' + policy.bucket + '/', 
     type: 'POST', 
     xhr: function() { // custom xhr 
      var myXhr = $.ajaxSettings.xhr(); 
      if(myXhr.upload){ // check if upload property exists 
       myXhr.upload.addEventListener('progress', 
        function (e){ 
         if(e.lengthComputable) 
          onProgressUpdate(e.loaded/e.total * 100); 

       }, false); // for handling the progress of the upload 
      } 
      return myXhr; 
     }, 
     success: function() { 
      // file finished uploading 
     }, 
     error: function() { onFinished({error: arguments[1]}); }, 
     processData: false, 
     contentType: false, 
     // Form data 
     data: formData, 
     cache: false, 
     xhrFields: { withCredentials: true }, 
     dataType: 'xml' 
    }); 
}); 

編輯：

「文件」 變量中的行：formData.append("file", file);是從線類似於：var file = document.getElementById('fileUpload').files[0];

服務器端代碼看起來是這樣的：

Meteor.methods({ 
    s3Upload: function (name) { 
     var myS3 = new s3Policies('my key', 'my secret key'); 

     var location = Meteor.userId() + '/' + moment().format('MMM DD YYYY').replace(/\s+/g, '_') + '/' + name; 
     if(Meteor.userId()) { 
      var bucket = 'my bucket'; 
      var policy = myS3.writePolicy(location, bucket, 10, 4096); 
      policy.key = location; 
      policy.bucket = bucket; 
      policy.mimeType = mime.lookup(name); 
      return policy; 
     } 
    } 
});