Applicazione Cordova/Ionic caricamento immagine base64 su S3 tramite l'URL firmato dal server

Question

Non riesco a caricare la foto su S3. Ho visto molte risorse online e non riesco a trovare una risposta definitiva a questo. Ecco cosa ho finora. Ricevo sempre il codice di errore: 3 come messaggio non riuscito.

lato client:

$scope.uploadTopicPhoto = function(imageData) { 
    var image2save = "data:image/jpeg;base64," + imageData; 
    $http({ 
     url: 'http://api.example.io/signS3upload', 
     method: "GET" 
    }).then(function (success) { 
     var options = new FileUploadOptions(); 
     options.fileKey = "file"; 
     options.fileName = success.data.key 
     options.mimeType = "image/jpeg";  
     options.chunkedMode = false; 
     options.httpMethod = 'PUT'; 

     function win(r) { 
      console.log("Code = " + r.responseCode); 
     } 

     function fail(error) { 
      alert("An error has occurred: Code = " + error.code); 
     } 

     var uri = encodeURI(success.data.signed_request); 

     var ft = new FileTransfer(); 
     ft.upload(image2save, uri, win, fail, options); 
    }); 
} 

lato server:

var s3 = new aws.S3(); 
    var bucketName = 'testimages'; 
    var s3_params = { 
     Bucket: bucketName, 
     Key: uuid.v4() + '.jpg', 
     Expires: 60, 
     ContentEncoding: 'base64', 
     ContentType: 'image/jpeg', 
     ACL: 'public-read' 
    }; 

    s3.getSignedUrl('putObject', s3_params, function(err, data){ 
     if (err) { 
      console.log(err); 
     } else { 
     var return_data = { 
      signed_request: data, 
      key: s3_params.Key 
     }; 
     res.json(return_data); 
     } 
}); 

CORS:

<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/"> 
    <CORSRule> 
     <AllowedOrigin>*</AllowedOrigin> 
     <AllowedMethod>GET</AllowedMethod> 
     <AllowedMethod>PUT</AllowedMethod> 
     <AllowedMethod>POST</AllowedMethod> 
     <AllowedMethod>DELETE</AllowedMethod> 
     <MaxAgeSeconds>3000</MaxAgeSeconds> 
     <AllowedHeader>Content-*</AllowedHeader> 
     <AllowedHeader>Authorization</AllowedHeader> 
     <AllowedHeader>*</AllowedHeader> 
    </CORSRule> 
</CORSConfiguration> 

Answer 1

Penso che non è necessario includere data:image/jpeg;base64, di fronte i dati di immagine Base64 . Basta rimuovere quella parte e caricare i dati base64 direttamente dal corpo della richiesta.

Vedere: https://stackoverflow.com/a/7548264/3427434 e http://docs.aws.amazon.com/AmazonS3/latest/API/RESTObjectPUT.html#RESTObjectPUT-requests.

Answer 2

funziona per me, invio il file immagine all'API REST e l'API carica l'immagine nel bucket s3 e le credenziali vengono recuperate da un altro file [salva credenziali].

(function() { 
function execute(rqst, q, fwk) { 
    console.log('called api') 
    var uploadedFile = rqst.files['image']; 
    console.log(rqst.files['image']); 
    var newId = fwk.uuid.v4(); 
    console.log('.........', rqst); 
    if (rqst.body.data) { 
     var image_type = rqst.body.data; 
    } else { 
     var image_type = rqst.body.image_type; 
    } 
    console.log('type', image_type, newId); 
    if (image_type && uploadedFile) { 
     if (!uploadedFile.extension) { 
      uploadedFile.extension = "png"; 
      console.log('not ex'); 
     } 
     var newPath = "images/food-images" + "/" + newId + '.' + uploadedFile.extension; 
     fwk.getAwsS3Client(function(err, awsS3Client) { 
      var params = { 
       localFile: uploadedFile.path, 
       s3Params: { 
        Bucket: fwk.config.awsS3.bucketName, 
        Key: newPath, 
       }, 
      }; 
      var uploader = awsS3Client.uploadFile(params); 
      uploader.on('error', function(err) { 
       console.error('Unable to upload' + image_type + 'photo:' + err.toString()); 
       q.resolve({ 
        status: 200, 
        data: { 
         code: 1, 
         error_message: 'Unable to upload' + image_type + 'photo.' 
        } 
       }); 
      }); 
      uploader.on('progress', function() { 
       console.log(uploader.progressAmount); 
      }); 
      uploader.on('end', function() { 
       console.log("upload" + image_type + "photo done."); 
       fwk.getAwsS3PublicUrl(newPath, function(err, publicUrl) { 
        if (err) { 
         console.error('Error getting public url: ' + err.toString()); 
         q.resolve({ 
          status: 200, 
          data: { 
           code: 1, 
           error_message: 'Error getting public url.' 
          } 
         }); 
        } else { 
         // console.log('ho gya upload',newPath,publicUrl) 
         q.resolve({ 
          status: 200, 
          data: { 
           code: 0, 
           photo_url: newPath, 
           public_photo_url: publicUrl 
          } 
         }); 
        } 
       }) 
      }); 
     }); 
    } else { 
     console.error('Error key parameter missing'); 
     q.resolve({ 
      status: 200, 
      data: { 
       code: 1, 
       error_message: 'Error Missing required key in params.' 
      } 
     }); 
    } 
} 
exports.execute = execute; 
    })(); 

Answer 3

Se si utilizza canvas.toDataURL non avete bisogno del data:image/jpeg;base64, è generato dalla funzione. Se si utilizza btoa, sarà necessario aggiungere l'intestazione data:image/jpeg;base64.