Dołącz obraz pliku do postaci danych - Cordova/Angular

Question

Używam Anuglar, Ionic i Cordova w moim bieżącym projekcie, a ja próbuję POST FormData zawierające plik obrazu do mojego serwera. Teraz używam cordova camera plugin, aby zwrócić ścieżkę pliku do obrazu na urządzeniu (np: file: // path/to/img). Kiedy już mam ścieżkę pliku, chcę dołączyć plik obrazu do obiektu FormData za pomocą ścieżki pliku obrazów. Oto mój kod właśnie teraz. powyżej

var fd = new FormData(); 

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

Kod działa podczas dołączania pliku, który zostaje wyniesiony z <input type='file'> ale nie działa po prostu ze względu na ścieżkę do pliku na urządzeniu.

Zasadniczo FormData pokazuje jak tego prawa teraz:

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

file://path/to/img 

i chcę, żeby wyglądać tak

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

Znalazłem wiele różnych sposobów, aby przesłać obraz używając Cordova FileTransfer i przez konwersję obrazu na base64, a następnie przesłanie go. Ale nie mogłem znaleźć żadnych prostych sposobów po prostu chwytając plik za pomocą ścieżki i umieszczając go w formularzu. Nie jestem obeznany z File Api, więc każda pomoc byłaby doceniana:

Answer 1

Po krótkim zastanowieniu się uda mi się wymyślić całkiem proste rozwiązanie. Najpierw dodał cordova file plugin następnie użyć poniższy kod

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

Więc ja po prostu tworzenia formularza i stosując FileReader wstawić ArrayBuffer do obiektu blob i następnie dołączyć że do danych formularza. Mam nadzieję, że pomoże to komuś, kto szuka łatwego sposobu na zrobienie tego.

Answer 2

Musisz wysłać zawartość pliku. Z plikiem HTML5 FileAPI należy utworzyć obiekt FileReader.

Jakiś czas temu opracowałem aplikację z cordova i musiałem przeczytać kilka plików, i zrobiłem bibliotekę o nazwie CoFS (po pierwsze, przez Cordova FileSystem, ale działa w niektórych przeglądarkach).

Jest w stanie beta, ale używam go i działa dobrze. Możesz spróbować zrobić coś takiego:

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

Przepraszam za mój biedny angielski.