Angular: Kann Eigenschaft "Bild" von undefined

Question

nicht lesen

Ich versuche, ein Bild durch Filestack auf meine Mongodb hochladen, aber ich bekomme einen Fehler beim Setzen der Blob in meinem Bereich (sagt, es ist undefined), aber ich kann ' Es scheint mir, herauszufinden, warum es das tut.

Ich installierte Filepicker-Winkel eine benutzerdefinierte Schaltfläche zu machen, hier ist der Github Link: https://github.com/filepicker/filepicker-angular

Das Hochladen geht in Ordnung, das ist der Fehler, den ich allerdings immer bin:

Wie Sie sehen können, Filepicker lädt das Bild aber nicht innerhalb des $ scope gespeichert bekommt, die ich wählte:

{"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 

Hier ist mein Code:

-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

Das Problem ist, haben Sie nicht ein Objekt auf $scope namens capture definiert. Alles, was Sie brauchen, ist ein Objekt namens capture, gebunden an Ihre scope. Genau wie ich in Ihrer upload Funktion definiert habe. $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); 
    }; 
}]);