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

Question

在我使用 cordova file-transfer 插件与我自己的后端签名后，我有一个上传图像到 amazon s3 的服务。我在使用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
})

我在控制器的这一行中得到错误：

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

同样重要的是要提到我在我的离子应用程序中使用人行横道。

Answer 1

您当前实施的 S3Uploader.upload 没有 return 承诺，它 return 什么都不是。将您的声明和承诺的 return 直接移动到 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
    }

})

Answer 2

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

您需要的就是这些：

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

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

        // listener logic

        return deferred.promise;
    }

    return {
        upload : upload
    }
});

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

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

Angular: cannot read property 'then' of undefined

android

amazon-s3

angularjs

cordova

crosswalk-runtime

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

Angular: cannot read property 'then' of undefined

android

amazon-s3

angularjs

cordova

crosswalk-runtime

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