Question

我正在尝试通过filestack将图片上传到我的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的{{1}}上定义对象。您只需要一个名为capture的对象绑定到您的capture。就像我在scope函数中定义的一样。 upload：

$scope.capture = {};

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

1 个答案: