web-dev-qa-db-fra.com

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 POST FormData contenant un fichier image sur mon serveur. En ce moment, je utilise le plugin de l'appareil photo cordova pour renvoyer un chemin de fichier vers l'image sur le périphérique (ex: file: // path/to/img). Une fois que j'ai le chemin de fichier, je veux ajouter le fichier image vers un objet FormData en utilisant le chemin du fichier images. Voici mon code en ce moment.

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 provenant d'un <input type='file'> mais ne fonctionne pas lorsque le chemin du fichier est indiqué sur le périphérique.

Fondamentalement, le FormData s'affiche comme ceci en ce moment:

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

file://path/to/img

et je veux que ça ressemble à ça

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

J'ai trouvé de nombreuses façons différentes de télécharger l'image en utilisant cordova FileTransfer et en convertissant l'image en base64, puis en la téléchargeant. Mais je n'ai pas pu trouver de moyens simples de simplement saisir le fichier en utilisant le chemin d'accès et en le publiant dans un formulaire. Je ne connais pas très bien le File Api donc toute aide serait appréciée

javascriptandroidangularjscordovaionic-framework
21
Joe Komputer

Après quelques tripotages, je parviens à trouver une solution assez simple. J'ai d'abord ajouté le plugin de fichier cordova 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)});

Je crée donc un formulaire et j'utilise FileReader pour insérer un ArrayBuffer dans l'objet Blob, puis l'ajouter aux données du formulaire. J'espère que cela aidera quelqu'un d'autre à chercher un moyen facile de le faire.

41
Joe Komputer

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

Il y a quelque temps, j'ai développé une application avec cordova et j'ai dû lire certains fichiers, et j'ai créé une bibliothèque appelée CoFS (d'abord, par Cordova FileSystem, mais cela fonctionne dans certains navigateurs).

Il est en version bêta, mais je l'utilise et fonctionne bien. Vous pouvez essayer d'en faire 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
Exos

Votre message a été extrêmement utile pour résoudre mon problème. J'utilise Ionic 4 et j'essaie de télécharger une image en utilisant http standard et un client de fichier. Le code clé pour référence est ici:

return this.file.readAsArrayBuffer(path, file).
  then(blob => {
    const imgBlob = new Blob([blob], { type: 'image/jpeg' } );

    formData.append('image[file]', imgBlob);

    return this.http.post(url, formData, headers).subscribe();
});

J'espère que cela aide quelqu'un là-bas, comme pour moi.

0
user11794