无法从Ionic Camera将图像上传到AWS S3？ [英] Can't upload image to AWS S3 from Ionic Camera?

问题描述

我正在尝试使用Ionic将图像上传到AWS，但存储在AWS中的文件出错，我看不到图像。错误说明：图像...无法显示，因为它包含错误。这是代码：

I'm trying to upload a image to AWS with Ionic but the file stored in AWS have a error and I can't see the image. The error says: The image ... cannot be displayed because it contains errors. This is the code:

var options = {
        quality: 80,
        destinationType: Camera.DestinationType.DATA_URL,
        sourceType: Camera.PictureSourceType.CAMERA,
        allowEdit: true,
        encodingType: Camera.EncodingType.JPEG,
        popoverOptions: CameraPopoverOptions,
        saveToPhotoAlbum: true,
        correctOrientation:true
    };
    $cordovaCamera.getPicture(options)
        .then(function(imageData) {
            fileName = "image/image"+$scope.itemsListID;
            function uploadS3(image, name) {
                AWS.config.update({ accessKeyId: "...key...", secretAccessKey: "...key2..." });
                AWS.config.region = 'us-east-1';
                var bucket = new AWS.S3({params: {Bucket: 'bucketname'}});
                var params = {Key: name, ContentType: 'image/jpg', Body: image};
                bucket.upload(params, function(err, data){
                    if(err){
                        //alert("err"); 
                        $ionicPopup.alert({
                            title: "Server Error",
                            content: "Failed to upload the image.",
                            okType: "button-stable"
                        });
                        $ionicLoading.hide();
                    }
                    else{
                        //alert("data");
                        $ionicPopup.alert({
                            title: "Successful",
                            content: "Image have been uploaded successfuly.",
                            okType: "button-stable"
                        });
                        $ionicLoading.hide();
                    }
                });
            }
            uploadS3(imageData, fileName);
        }, function(err) {
            $ionicPopup.alert({
                title: "Server Error",
                content: "Failed to connect with the server.",
                okType: "button-stable"
            });
            console.log(err);
        });

推荐答案

我最终从base64编码的图像创建BLOB从getPicture返回。

I ended up creating a BLOB from the base64 encoded image returned from getPicture.

   var dataURItoBlob = function(dataURI) {
      var binary = atob(dataURI.split(',')[1]);
      var array = [];
      for(var i = 0; i < binary.length; i++) {
        array.push(binary.charCodeAt(i));
      }
      return new Blob([new Uint8Array(array)], {type: 'image/jpeg'});
    };

    //imgData returned from camera getPicture
    var body = dataURItoBlob("data:image/jpeg;base64," + imageData);

    var options = {
              Key: 'mytestimg2.jpg', 
              ContentType: 'image/jpeg', 
              Body:body, 
              ContentEncoding: 'base64'
        }

    //aws specific upload code here
    bucket.upload(options, err, data)...

这篇关于无法从Ionic Camera将图像上传到AWS S3？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！