Angular:无法读取属性'然后'未定义的

时间:2015-06-22 22:56:30

标签: android angularjs cordova amazon-s3 crosswalk-runtime

在使用amazon s3 cordova插件使用我自己的后端签名后,我有一个服务上传图片到file-transfer。 我使用cordova camera插件拍摄照片后将此服务上传到s3 bucket。 应用程序使用我自己的后端正确签名但是当它触发函数upload时,我得到了我在标题中定义的错误。 这是service,它在我的后端调用终点来签署文件,然后将图像上传到amazon s3

//Image upload Service
.factory('S3Uploader', function($q, $window, $http, $ionicPopup, API_URL) {

    var signingURI = API_URL + "s3signing";

    function upload(imageURI, fileName) {
        document.addEventListener('deviceready', function() {
            console.log('Uploading ' + fileName + ' to S3');

            var deferred = $q.defer(),
                ft = new FileTransfer(),
                options = new FileUploadOptions();

            options.fileKey = "file";
            options.fileName = fileName;
            options.mimeType = "image/jpeg";
            options.chunkedMode = false;

            console.log('Requesting signed doc ' + signingURI);
            $http.post(signingURI, {
                "fileName": fileName
            })
                .success(function(data) {
                    console.log('Got signed doc: ' + JSON.stringify(data));
                    options.params = {
                        "auth": true,
                        "key": fileName,
                        "AWSAccessKeyId": data.awsKey,
                        "acl": "public-read",
                        "policy": data.policy,
                        "signature": data.signature,
                        "Content-Type": "image/jpeg"
                    };

                    ft.upload(imageURI, "https://" + data.bucket + ".s3.amazonaws.com/",
                        function(e) {
                            console.log("Upload succeeded");
                            console.log(JSON.stringify(e));
                            deferred.resolve(e);
                            $ionicPopup.alert({
                                title: 'great',
                                content: 'The image upload to amazon success'
                            });
                        },
                        function(e) {
                            deferred.reject(e);
                            $ionicPopup.alert({
                                title: 'Oops',
                                content: 'The image upload failed to amazon'
                            });
                        }, options);

                })
                .error(function(data, status, headers, config) {
                    console.log(JSON.stringify(data));
                    console.log(status);
                    $ionicPopup.alert({
                        title: 'Oops',
                        content: 'The image upload failed to sign with node'
                    });
                });

            return deferred.promise;

        }, false); //device ready

    }

    return {
        upload: upload
    }

})

这里是调用摄像头插件的控制器代码,并且在拍摄照片时成功调用了来自S3Uploader服务的上传功能:

.controller('newItemCtrl', function($scope, $http, $ionicPopup, $timeout, $cordovaCamera, API_URL, me, S3Uploader) {
$scope.selectPicture = function() {
        document.addEventListener('deviceready', function() {

            var options = {
                destinationType: Camera.DestinationType.FILE_URI,
                sourceType: Camera.PictureSourceType.CAMERA,
                allowEdit: true,
                encodingType: Camera.EncodingType.JPEG,
                targetWidth: 300,
                targetHeight: 300,
            };
            $cordovaCamera.getPicture(options).then(function(imageURI) {
                $scope.imageSrc = imageURI;
                // upload to Amazon s3 bucket
                var fileName = new Date().getTime() + ".jpg";
                S3Uploader.upload(imageURI, fileName).then(function() {
                    alert("upload to S3 successed");
                });
            }, function(err) {
                alert(err);
            });

        }, false); // device ready
    }; // Select picture
}) 

我在控制器的这一行得到了erorr:

S3Uploader.upload(imageURI, fileName).then(function() {

提及使用人行横道与我的离子应用程序也很重要。

2 个答案:

答案 0 :(得分:0)

您当前的S3Uploader.upload实现不会返回承诺,也不会返回任何内容。将您的声明和承诺的回复直接移到S3Uploader.upload函数中,而不是嵌套在document.addEventListener代码中。

将您的代码更改为:

.factory('S3Uploader', function($q, $window, $http, $ionicPopup, API_URL) {

    var signingURI = API_URL + "s3signing";

    function upload(imageURI, fileName) {
        var deferred = $q.defer()
        document.addEventListener('deviceready', function() {
            // Removed for brevity
        }, false);
        return deferred.promise;
    }

    return {
        upload: upload
    }

})

答案 1 :(得分:0)

您正在创建并返回延迟对象及其来自事件侦听器的承诺。不是上传工厂方法。

你需要的是:

.factory('S3Uploader', function($q) {

    function upload() {
        var deferred = $q.defer();

        // listener logic

        return deferred.promise;
    }

    return {
        upload : upload
    }
});

您将遇到此问题,因为每次触发侦听器时都需要新的延迟对象。将监听器添加到工厂方法以执行某些操作对我来说似乎是一个糟糕的模式。该事件应该包装工厂方法的调用。