Aggiunge il file immagine per formare i dati - Cordova/Angular

Question

Sto usando Anuglar, Ionic e Cordova nel mio progetto corrente e sto provando a POST FormData contenente un file immagine sul mio server. In questo momento sto usando il cordova camera plugin per restituire un percorso di file all'immagine sul dispositivo (ad esempio: file: // percorso/a/img). Una volta che ho il percorso del file voglio aggiungere il file immagine a un oggetto FormData utilizzando il percorso del file di immagini. Ecco il mio codice adesso.

var fd = new FormData(); 

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

Il codice precedente funziona quando si aggiunge un file che viene assunto da un <input type='file'> ma non funziona quando appena dato il percorso del file sul dispositivo.

Fondamentalmente il formdata sta mostrando in questo modo in questo momento:

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

file://path/to/img 

e voglio farlo sembrare come questo

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

ho trovato molti modi diversi per caricare l'immagine utilizzando cordova FileTransfer e convertire l'immagine in base64 e quindi caricarla. Ma non sono riuscito a trovare alcun modo semplice per afferrare il file semplicemente utilizzando il percorso e pubblicandolo all'interno di un modulo. Non ho molta familiarità con il File Api quindi qualsiasi aiuto sarebbe apprezzato

Answer 1

Dopo un po 'di scherzi riesco a capire una soluzione piuttosto semplice. Per prima cosa ho aggiunto il cordova file plugin allora io uso il codice qui sotto

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)}); 

Quindi sono solo la creazione di un modulo e utilizzando FileReader di inserire un ArrayBuffer all'oggetto Blob e quindi aggiungere che per i dati del modulo. Speriamo che questo aiuti qualcun altro a cercare un modo semplice per farlo.

Answer 2

È necessario inviare il contenuto del file. Con HTML5 FileAPI è necessario creare un oggetto FileReader.

Qualche tempo fa, ho sviluppato un'applicazione con cordova e ho dovuto leggere alcuni file, e ho creato una libreria chiamata CoFS (in primo luogo, da Cordova FileSystem, ma funziona su alcuni browser).

È in stato beta, ma io lo uso e funziona bene. Puoi provare a fare qualcosa del genere:

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); 

Scusate il mio povero inglese.