流星を使ってFileReaderからAmazon s3に画像をアップロードする方法

Question

Amazonで流星の画像をアップロードしようとしています。 Hubert OGのおかげで、Iveは事を簡単にするAWS-SDKを見つけました。

私の問題は、アップロードされたデータが破損しているようです。ファイルをダウンロードすると、ファイルが破損している可能性があります。おそらくそうです。

イメージsrcにデータを挿入すると正常に動作し、イメージのプレビューが想定どおりに表示されるため、元のファイルとおそらくデータが正しくなります。

ファイルをFileReaderでロードして、結果データをAWS-SDK putObjectメソッドに渡すよりも、 - 参照the documentation

"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

体をバッファに変換されなければならない：

 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); 

が、これは、サーバ上の方法です。

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' 
    }); 
}); 

EDIT：

ラインで "ファイル" 変数：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; 
     } 
    } 
});