Ajouter un fichier image pour former des données-Cordova / Angular

J'utilise Anuglar, Ionic et Cordova dans mon projet actuel, et j'essaie de poster FormData contenant un fichier image sur mon serveur. Maintenant je suis en utilisant le cordova caméra plugin pour retourner le chemin du fichier de l'image sur l'appareil (ex: file://chemin/vers/img). Une fois que j'ai le chemin du fichier, je veux ajouter le fichier image à un objet FormData en utilisant le chemin du fichier images. Voici mon code maintenant.

var fd = new FormData();

fd.append('attachment', file);
fd.append('uuid', uuid);
fd.append('userRoleId', userRole);

Le code ci-dessus fonctionne lors de l'ajout d'un fichier qui est pris à partir d'un <input type='file'> mais ne fonctionne pas quand vient de donner le chemin du fichier sur le périphérique.

fondamentalement le FormData montre comme ceci en ce moment: 

------WebKitFormBoundaryasdf
Content-Disposition: form-data; name="attachment"; 

file://path/to/img

et je veux qu'elle ressemble à ceci

------WebKitFormBoundaryasdf
Content-Disposition: form-data; name="attachment"; filename="jesus-quintana.jpg"
Content-Type: image/jpeg

j'ai trouvé de nombreuses façons de télécharger l'image en utilisant cordova FileTransfer et en convertissant l'image en une base64 puis en la téléchargeant. Mais je n'ai pas pu trouver de façon simple de saisir le fichier en utilisant le chemin et en le postant dans un formulaire. Je ne suis pas très familier avec l' Le Fichier Api de sorte que toute aide serait appréciée

20
demandé sur manzapanza 2015-03-04 02:17:22

2 réponses

après quelques bricolages autour de moi j'arrive à trouver une solution assez simple. J'ai d'abord ajouté le cordova fichier plugin puis j'utilise le code ci-dessous

var fd = new FormData();
     window.resolveLocalFileSystemURL(attachment.img, function(fileEntry) {
         fileEntry.file(function(file) {
             var reader = new FileReader();
                 reader.onloadend = function(e) {
                      var imgBlob = new Blob([ this.result ], { type: "image/jpeg" } );
                      fd.append('attachment', imgBlob);
                      fd.append('uuid', attachment.uuid);
                      fd.append('userRoleId', 12345);
                      console.log(fd);
                      //post form call here
                 };
                 reader.readAsArrayBuffer(file);

         }, function(e){$scope.errorHandler(e)});
    }, function(e){$scope.errorHandler(e)});

donc je crée juste un formulaire et j'utilise FileReader pour insérer un ArrayBuffer à l'objet Blob et ensuite l'Ajouter aux données du formulaire. Espérons que cela aide quelqu'un d'autre à la recherche d'un moyen facile de le faire.

36
répondu Joe Komputer 2015-03-18 21:55:51

vous devez envoyer le contenu du fichier. Avec l' HTML5 FileAPI vous devez créer un FileReader objet.

il y a quelque temps, j'ai développé une application avec cordova et j'ai dû lire quelques fichiers, et j'ai fait une bibliothèque appelée CoFS (d'abord, par le système de fichiers Cordova, mais cela fonctionne dans certains navigateurs).

C'est sur la beta, mais je l'utilise et fonctionne bien. Vous pouvez essayer de faire un peu comme ceci:

var errHandler = function (err) {
   console.log("Error getting picture.", err);
};

var sendPicture = function (file) {

    var fs = new CoFS();

    fs.readFile(file, function (err, data) {

        if (err) {
            return errHandler(err);
        }

        var fd = new FormData();

        fd.append('attachment', new Blob(data));
        fd.append('uuid', uuid);
        fd.append('userRoleId', userRole);

        console.log("Data of file:" + data.toString('base64'));
        // Send fd...

    });

};

navigator.camera.getPicture(sendPicture, errHandler);

Désolé mon pauvre anglais.

6
répondu Exos 2015-03-04 06:01:28