使用phonegap将图像上传到S3，如何？

Question

我正在尝试将一些图像放到 S3 上，但不太成功...这是我目前的工作

$cordovaCamera.getPicture(options).then(function(imageURI) {
  // imageURI will be something like: file:///some_path

  // get the base64 data from the image
  var img = Utils.encodeImageUri(imageURI);

  // get the base64 from a new image, not sure if this is needed
  var image = new Image();
  image.src = img;


  Utils.uploadToS3(image.src);
}, function(err) {})

...

// boilerplate function to create a Blob
dataURItoBlob: function(dataURI) {
  var binary = atob(dataURI.split(',')[1]);
  var array = [];
  for (var i = 0; i < binary.length; i++) {
    array.push(binary.charCodeAt(i));
  }

  var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
  return new Blob([new Uint8Array(array)], {
    type: mimeString
  });
},


// the actual upload
uploadToS3: function(imageData) {
  var imgData = this.getImgData(imageData); // will return Object {extension: "jpg", type: "image/jpeg"}
  var data    = this.dataURItoBlob(imageData);

  AWS.config.update({accessKeyId: accessKey, secretAccessKey: secretKey});
  var bucket = new AWS.S3({params:{Bucket: 'testbucket'}});

  var params = {
    Key: 'main.' + imgData.extension,
    Body: data,
    ContentEncoding: 'base64',
    ContentType: imgData.type
  };

  bucket.upload(params, function(err, data) {
    console.log(data.Location); // this will be the path to my image on s3
  });
}

我所做的只是从图像中抓取 base64 数据，创建一个 Blob 并将其发送到亚马逊

我确实在存储桶中得到了一张图片，所以通过发送数据可以正常工作，但图片要么是黑色的，要么有时是破损的

有什么想法吗？

Answer 1

最后..这是我的解决方法。

基本上 destinationType 需要 Camera.DestinationType.DATA_URL

即returnimageData为编码后的数据。

然后将其发送到 S3，但附加 data:image/jpeg;base64, 这样 S3 就会知道发生了什么

查看下面的完整代码：

  var options = {
    destinationType: Camera.DestinationType.DATA_URL, // this needs to be DATA_URL 
    sourceType: Camera.PictureSourceType.PHOTOLIBRARY // i am getting this image from the library. Use CAMERA if you wnat to take a pic
  };

  $cordovaCamera.getPicture(options).then(function(imageData) {
    // make sure the imageData is base64 encoded
    Utils.uploadToS3('data:image/jpeg;base64,' + imageData);

  }, function(err) {
    console.log(err);
  })

...

uploadToS3: function(imageData) {
  var imgData = this.getImgData(imageData); // or just hardcode {extension: "jpg", type: "image/jpeg"} if you only want jpg
  var key = 'SOME_IMAGE_NAME.' + imgData.extension; // bucket path after BUCKET_NAME

  AWS.config.update({
    accessKeyId: ACCESS_KEY_HERE,
    secretAccessKey: SECRET_ACCESS_KEY_HERE
  });

  var bucket = new AWS.S3({params: {Bucket: 'BUCKET_NAME_HERE'}});
  var params = {
    Key: key,
    Body: imageData,
    ContentEncoding: 'base64',
    ContentType: imgData.type
  };

  bucket.upload(params, function(err, data) {
    if (err) {
      console.log(err);
    } else {
      //data.Location is your s3 image path
    }
  });
}

... helpers ...

  getImgData: function(img) {
    var extension = 'jpg';
    var type = 'image/jpeg';
    var base64result = img.split(',')[0];
    if (base64result.indexOf("png") > -1) {
      extension = 'png';
      type = 'image/png';
    }

    return {
      extension: extension,
      type: type
    };
  },

使用phonegap将图像上传到S3，如何？

Uploading image to S3 using phonegap, how to?

javascript

image-uploading

amazon-s3

phonegap-plugins

cordova