Wie Bilder von FileReader auf Amazon s3 hochgeladen werden, mit Meteor

Question

Ich versuche, ein Bild-Uploader mit Meteor zu Amazon S3 zu bauen. Dank Hubert OG habe ich AWS-SDK gefunden, was die Sache einfach macht.

Mein Problem ist, dass die hochgeladenen Daten beschädigt zu sein scheinen. Wenn ich die Datei herunterlade, heißt es, die Datei könnte beschädigt sein. Wahrscheinlich ist es.

Einfügen der Daten in ein Bild src, funktioniert, und die Vorschau des Bildes zeigt sich so, wie es soll, so dass die ursprüngliche Datei und wahrscheinlich die Daten korrekt sind.

Ich lade die Datei mit FileReader, und dann übergeben Sie die Ergebnisdaten AWS-SDK PutObject-Methode.

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

und dies ist die Methode auf dem Server:

"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

Der Körper puffern konvertiert werden soll - siehe the documentation.

Also statt Body: data sollten Sie Body: new Buffer(data, 'binary') haben.

Answer 2

Ich wickelte einen npm Modul als ein Smart-Paket hier: https://atmosphere.meteor.com/package/s3policies

Mit ihm können Sie eine Meteor-Methode machen, die eine Schreib Politik zurückkehrt und mit dieser Politik können Sie auf S3 mit einem Ajax-Aufruf laden.

Beispiel:

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:

Der "Datei" Variable in der Zeile: formData.append("file", file); ist von einer Zeile wie folgt aus: var file = document.getElementById('fileUpload').files[0];

Der Server-Side-Code wie folgt aussieht:

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