Upload Base64 Bild mit eckigen Datei-Upload

Question

Ich erstelle ein Formular in eckigen, wo der Benutzer ein Foto von der Webcam, wo ich mit ng-webcam und nachdem ich das Bild machen kann, ist es auf einem Zielfernrohr als Base64 Bild zu speichern . Jetzt versuche ich dies mit angular-file-upload hochladen. Aber ich verstehe nicht ganz, wie es funktioniert. Die Beispiele, die auf dem Projekt kommen, laden ein Bild vom PC hoch, aber ich möchte das base64 Bild einstellen und es senden.

Wie kann ich das tun?

AKTUALISIERT

Dies ist, wie ich in der Regel ein Bild vom Computer hochladen, verwende ich die Funktion namens uploadProfilePicture(); Also, was ich tun möchte, ist in der Anforderung gestellt, dass ich nehme an ist $scope.uploader mein $scope.photo das ist Mein Base64-Bild.

//This is where I take the image from de webcam 
$scope.onCaptureComplete = function(src) { 
    $scope.photo = src[0]; 
}; 

$scope.uploader = new FileUploader({ 
    url: 'api/user/picture' 
}); 

// Called after the user selected a new picture file 
$scope.uploader.onAfterAddingFile = function(fileItem) { 
    if ($window.FileReader) { 
    var fileReader = new FileReader(); 
    fileReader.readAsDataURL(fileItem._file); 

    fileReader.onload = function(fileReaderEvent) { 
     $timeout(function() { 
     $scope.imageURL = fileReaderEvent.target.result; 
     // console.log($scope.imageURL); 
     $scope.localImg = true; 
     }, 0); 
    }; 
    } 
}; 

// Called after the user has successfully uploaded a new picture 
$scope.uploader.onSuccessItem = function(fileItem, response, status, headers) { 
    $scope.localImg = false; 

    // Show success message 
    $scope.success = true; 

    // Populate user object 
    $scope.user = Authentication.user = response; 

    // Clear upload buttons 
    $scope.cancelUpload(); 
}; 

// Change user profile picture 
$scope.uploadProfilePicture = function() { 
    // Clear messages 
    $scope.success = $scope.error = null; 

    // Start upload 
    $scope.uploader.uploadAll(); 
}; 

Answer 1

Versuchen Sie es, es funktioniert für mich.

Ausblick:

<img ng-src="data:image/jpeg;base64,{{unImage.image}}" class="images" /> 

<div class="col-md-9 lato size-twelve grey" editable-file="editImage" e-onchange="angular.element(this).scope().uploadFile(this, angular.element(this).scope().allUnits.images)" e-rows="7" e-cols="40" e-name="image" e-form="rowform" e-multiple> 
</div> 

Reglerfunktion:

$scope.uploadFile = function (input, allUnits) { 
      allUnits.images = []; 
      if (input.files && input.files[0]) { 
       for (var i = 0; i < input.files.length; i++) { 
        allUnits.images.push(input.files[i]); 
       } 
      } 
}; 

var file=image['images']; 
Upload.upload({ 
       method: 'POST', 
       headers: { 
        'Authorization': 'Bearer ' + window.localStorage.getItem('token') 
       }, 
       url: baseUrl + '/test/upload-image', 
       data: {id: data.id, file: file} 
});