Veri oluşturmak için resim dosyası ekle - Cordova/Angular

Question

Geçerli projemde Anuglar, Ionic ve Cordova kullanıyorum ve sunucuma bir görüntü dosyası içeren POST FormData'yı çalıştırmaya çalışıyorum. Şu anda cihazdaki görüntüye bir dosya yolunu döndürmek için cordova camera plugin kullanıyorum (ör: dosya: // yol/to/img). Dosya yoluna sahip olduğumda, görüntü dosyasını görüntü dosyası yolunu kullanarak bir FormData nesnesine eklemek istiyorum. İşte benim kodum şu an. Bir <input type='file'> alınır ama sadece cihazda dosya yolunu verildiğinde çalışmayan bir dosyayı eklerken

var fd = new FormData(); 

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

Yukarıdaki kod çalışır.

Temelde FormData şimdiki gibi gösteriyor:

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

file://path/to/img 

ve nasıl bir şey bakmak istiyorum ben cordova FileTransfer tarafından kullanılarak resim yüklemek için birçok farklı yollar buldular

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

bu görüntüyü bir base64'e dönüştürmek ve daha sonra yüklemek. Ancak yolu kullanarak ve bir form içinde göndererek dosyayı kapmanın basit bir yolunu bulamadım. File Api ile pek tanıdık değilim, bu nedenle herhangi bir yardım için teşekkür ederiz

Answer 1

Biraz uğraşmadan sonra oldukça basit bir çözüm bulmayı başardım. Önce cordova file plugin sonra

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

Yani sadece bir form yaratma ve Blob nesnesine bir ArrayBuffer eklemek ve sonra form verileri bu eklemek için FileReader kullanıyorum aşağıdaki kodu kullanabilirsiniz eklendi. Umarım bu, başka birinin bunu yapmanın kolay bir yolunu aramasına yardımcı olur.

Answer 2

Dosya içeriği göndermeniz gerekiyor. HTML5 FileAPI ile bir FileReader nesnesi oluşturmanız gerekir.

Bir süre önce, cordova ile bir uygulama geliştirdim ve bazı dosyaları okumak zorunda kaldım ve CoFS adlı bir kütüphane yaptım (önce Cordova FileSystem tarafından yazılmış, ancak bazı tarayıcılarda çalışıyor).

Beta durumunda, ancak kullanıyorum ve iyi çalışıyor. Bunu yapmayı deneyebilirsiniz:

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

Üzgünüm İngilizcem.