Angular：无法读取未定义的属性“图片”

Question

我正在尝试通过文件堆栈将图片上传到我的 mongodb，但将 blob 放入我的范围时似乎出现错误（说它未定义），但我似乎无法弄清楚它为什么这样做。

我安装了 filepicker-angular 来制作自定义按钮，这里是 github 链接：https://github.com/filepicker/filepicker-angular

上传正常，但这是我遇到的错误：

如您所见，filepicker 上传了图片，但它没有存储在我选择的 $scope 中：

{"url":"https://cdn.filepicker.io/api/file/2slhA5RSPmaF1UMmQy1E","filename":"bird.png",
"mimetype":"image/png","size":159104,"id":1,"client":"computer","isWriteable":true}

captureCtrl.js:20 

Uncaught TypeError: Cannot read property 'picture' of undefined
(anonymous function) @ captureCtrl.js:20
onSuccessMark @ filepicker.js:770
handler @ filepicker.js:644
run @ filepicker.js:343
base.(anonymous function) @ filepicker.js:19
communicationsHandler @ filepicker.js:94

这是我的代码：

-capture.html：

<form class="well" name="addCapture">
    <div class="form-group">
        <label for="picture">Upload your capture:</label>
        <div class="text-center">
            <button type="button" class="btn btn-default" ng-click="upload()">
                Upload <span class="caret"></span>
            </button>
            <div style="margin-top:10px;">
                <!-- Show the thumbnail only when the picture is uploaded -->
                <a href="{{capture.picture.url}}" class="thumbnail" ng-if="capture.picture">
                <!-- the picture is rendered with width: 500 and sharpened -->
                <img ng-src="{{capture.picture.url | fpConvert: {filter:'sharpen'} }}">
                </a>
            </div>                  
        </div>
    </div>
    <div class="form-group">
        <label for="birdname">Birdname</label>
        <input type="text" class="form-control" id="birdname" ng-model="birdname" required>
    </div>
    <div class="form-group move-down">
        <label for="place">Picture taken in:</label>
        <input type="text" class="form-control" id="place" ng-model="place" ng-autocomplete required>
    </div>
    <div class="form-group">
        <button type="submit" class="btn margin-left btn-success" ng-click="addToDatabase()" ng-disabled="addCapture.$invalid">Add Customer</button>
   </div>
</form>

-captureCtrl.js

app.controller('captureCtrl',[ '$scope', 'captureApi', 'auth', '$http', '$timeout', 'filepickerService', 
    function($scope, captureApi, auth, $http, $timeout, filepickerService){

        $scope.form = {};
        $scope.auth = auth;


        $scope.upload = function(){
            filepickerService.pick(
                {
                    mimetype: 'image/*',
                    language: 'en',
                    services: ['COMPUTER','DROPBOX','GOOGLE_DRIVE', 'FACEBOOK', 'INSTAGRAM'],
                    openTo: 'COMPUTER'
                },
                function(Blob){
                    console.log(JSON.stringify(Blob));
                    $scope.capture.picture = Blob;
                    $scope.$apply();
                }
            );
        };


        $scope.addToDatabase = function(){      
            $scope.form = {};
            var dataObj = {
                    birdname: $scope.birdname,
                    place : $scope.place,
                    userId : $scope.auth.profile.user_id,
                    author : $scope.auth.profile.name,
                    picture: $scope.capture.picture.url
            };  

            $scope.captureMessage = true;

            captureApi.insertCapture(dataObj)

            $scope.birdname = "";   
            $scope.place = "";
            $timeout(function() {
                $scope.captureMessage = false;
            }, 3000);
        };
    }]);

Answer 1

问题是，您还没有在$scope 上定义一个名为capture 的对象。您只需要一个绑定到您的scope 的名为capture 的对象。就像我在您的 upload 函数中定义的那样。 $scope.capture = {};:

app.controller('captureCtrl',[ '$scope', 'captureApi', 'auth', '$http', '$timeout', 'filepickerService', 
function($scope, captureApi, auth, $http, $timeout, filepickerService){

    $scope.form = {};
    $scope.auth = auth;


    $scope.upload = function(){
        filepickerService.pick(
            {
                mimetype: 'image/*',
                language: 'en',
                services: ['COMPUTER','DROPBOX','GOOGLE_DRIVE', 'FACEBOOK', 'INSTAGRAM'],
                openTo: 'COMPUTER'
            },
            function(Blob){
                console.log(JSON.stringify(Blob));
                $scope.capture = {};
                $scope.capture.picture = Blob;
                $scope.$apply();
            }
        );
    };


    $scope.addToDatabase = function(){      
        $scope.form = {};
        var dataObj = {
                birdname: $scope.birdname,
                place : $scope.place,
                userId : $scope.auth.profile.user_id,
                author : $scope.auth.profile.name,
                picture: $scope.capture.picture.url
        };  

        $scope.captureMessage = true;

        captureApi.insertCapture(dataObj)

        $scope.birdname = "";   
        $scope.place = "";
        $timeout(function() {
            $scope.captureMessage = false;
        }, 3000);
    };
}]);