Ionic-Angular.js Prendre des photos & envoi au serveur: null images

Donc, j'ai réussi à utiliser un custom directive de télécharger des images sur mon serveur, par l'intermédiaire de Angular.js.
J'ai aussi réussi à mettre en œuvre la fonctionnalité de caméra de Cordoue.
Maintenant, je suis en train d'essayer de relier les deux, mais lors de l'envoi des images vers le serveur, ils sont stockés comme null. Je crois que le problème réside dans le fait que j'ai été en utilisant un champ de saisie pour obtenir l'image, et il a été d'obtenir l'intégralité de l'Objet, et maintenant, je suis juste le chemin de l'image après je prends la photo et de l'envoyer. Mon problème est que je ne comprends pas vraiment comment je pourrais convertir le chemin d'accès à un Objet, SI tel est le problème?

index.html

<form class="form-horizontal" role="form">
    <button class="picButton" ng-click="getPhoto()" class="button button-block button-primary">Take Photo</button>
    <img ng-src="{{lastPhoto}}" style="max-width: 100%">
...
</form>

controllers.js

$scope.getPhoto = function() {
    Camera.getPicture().then(function(imageURI) {
        console.log(imageURI);
        $scope.lastPhoto = imageURI;
        $scope.upload(); <-- call to upload the pic
    },
    function(err) {
        console.err(err);
    }, {
        quality: 75,
        targetWidth: 320,
        targetHeight: 320,
        saveToPhotoAlbum: false
    });
};

$scope.upload = function() {
    var url = '';
    var fd = new FormData();

    //previously I had this
    //angular.forEach($scope.files, function(file){
        //fd.append('image',file)
    //});

    fd.append('image', $scope.lastPhoto);

    $http.post(url, fd, {

        transformRequest:angular.identity,
        headers:{'Content-Type':undefined
        }
    })
    .success(function(data, status, headers){
        $scope.imageURL = data.resource_uri; //set it to the response we get
    })
    .error(function(data, status, headers){

    })
}

Lors de l'impression de $champ d'application.lastPhoto je reçois le chemin de l'image: file:///var/mobile/Applications/../tmp/filename.jpg

MODIFIER

En-Têtes De Requête:

------WebKitFormBoundaryEzXidt71U741Mc45
Content-Disposition: form-data; name="image"

file:///var/mobile/Applications/C65C8030-33BF-4BBB-B2BB-7ECEC86E87A7/tmp/cdv_photo_015.jpg
------WebKitFormBoundaryEzXidt71U741Mc45--

Si cela devait à l'origine du problème? Depuis que je peux voir, je suis d'envoi du chemin, mais pas l'image elle-même..

Avant de changer, j'ai été en utilisant une mesure de la directive, et a été à l'aide de $champ d'application.les fichiers à ajouter à ma demande, dans la fonction de téléchargement:

<input type="file" file-input="files" multiple  onchange="angular.element(this).scope().filesChanged(this);upload();">
<button ng-click="upload()">Upload</button>

OriginalL'auteur Claudiu S | 2014-08-05

  1. 8

    - Je le résoudre avec ce code :

    $scope.getPhoto = function() {
    navigator.camera.getPicture(onSuccess, onFail, { quality: 75, targetWidth: 320,
    targetHeight: 320, destinationType: 0 }); 
    //destination type was a base64 encoding
    function onSuccess(imageData) {
        //preview image on img tag
        $('#image-preview').attr('src', "data:image/jpeg;base64,"+imageData);
        //setting scope.lastPhoto 
        $scope.lastPhoto = dataURItoBlob("data:image/jpeg;base64,"+imageData);
    }
    function onFail(message) {
        alert('Failed because: ' + message);
    }
} 
function dataURItoBlob(dataURI) {
//convert base64/URLEncoded data component to raw binary data held in a string
 var byteString = atob(dataURI.split(',')[1]);
 var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]

 var ab = new ArrayBuffer(byteString.length);
 var ia = new Uint8Array(ab);
 for (var i = 0; i < byteString.length; i++)
 {
    ia[i] = byteString.charCodeAt(i);
 }

 var bb = new Blob([ab], { "type": mimeString });
 return bb;
}

    après cette utilisation ajouter à votre formdata comme ceci:

    formData.append('photo', $scope.lastPhoto, $scope.publish.name+'.jpg')

    Ce code s'exécute sur IOS sans problème.

    Merci, cela fonctionne.

    OriginalL'auteur Cri_Roselli

  2. 1

    Je pense que votre problème se trouve dans la 'Content-Type':undefined. Pour les images, vous devez utiliser 'Content-Type':'image/jpeg'.

    Je voudrais également ajouter enctype="multipart/form-data" à la <form>.

    C'est ce que vous devez avoir lorsque deadling avec Angular.js les demandes.

    OriginalL'auteur ABucin

  3. 1

    Ce que j'ai fait a été d'ajouter destinationType: l'Appareil photo.DestinationType.DATA_URL dans le options de la getPhoto fonction, et qui retourne une représentation base64 de l'image, que j'ai ensuite envoyer sur le serveur et de les stocker dans un TextField() (Django):

    $scope.getPhoto = function() {
Camera.getPicture().then(function(imageURI) {
    console.log(imageURI);
    $scope.lastPhoto = imageURI;
    $scope.upload(); <-- call to upload the pic
},
function(err) {
    console.err(err);
}, {
    quality: 75,
    targetWidth: 320,
    targetHeight: 320,
    saveToPhotoAlbum: false,
    destinationType: Camera.DestinationType.DATA_URL
});
};

    Aussi, quand deadling avec Base64 images, n'oubliez pas d'appeler à l'aide:

    <img ng-src="data:image/jpeg;base64,{{image}}" />
    "TypeError: Cannot read property 'DATA_URL' undefined" aussi, vous avez une erreur dans les options. S'il vous plaît, le réparer ou vous obtiendrez déclassé.

    OriginalL'auteur Claudiu S