javascript - style - Anexar archivo de imagen para formar datos-Cordova/Angular

title html

Question

Estoy usando Anuglar, Ionic y Cordova en mi proyecto actual, y estoy tratando de PUBLICAR FormData que contiene un archivo de imagen en mi servidor. En este momento estoy usando el complemento de cámara cordova para devolver una ruta de archivo a la imagen en el dispositivo (por ejemplo: file: // ruta / a / img). Una vez que tengo la ruta del archivo, quiero adjuntar el archivo de imagen a un objeto FormData utilizando la ruta del archivo de imágenes. Aquí está mi código ahora mismo.

var fd = new FormData();

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

El código anterior funciona cuando se agrega un archivo que se toma de un <input type=''file''> pero no funciona cuando se le da la ruta del archivo en el dispositivo.

Básicamente, el FormData se muestra así en este momento:

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

file://path/to/img

y quiero que se vea así

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

Encontré muchas maneras diferentes de subir la imagen usando cordova FileTransfer y convirtiendo la imagen en una base64 y luego cargándola. Pero no pude encontrar ninguna forma simple de tomar el archivo usando la ruta y publicarlo dentro de un formulario. No estoy muy familiarizado con File Api así que cualquier ayuda sería apreciada

Answer 1

Después de jugar un poco, me las arreglo para encontrar una solución bastante simple. Primero agregué el complemento de archivo cordova y luego uso el siguiente código

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

Así que solo estoy creando un formulario y usando FileReader para insertar un ArrayBuffer en el objeto Blob y luego anexarlo a los datos del formulario. Con suerte, esto ayuda a alguien más a buscar una forma fácil de hacerlo.

Answer 2

Usted necesita enviar contenido de archivos. Con HTML5 FileAPI necesita crear un objeto FileReader .

Hace algún tiempo, desarrollé una aplicación con cordova y tuve que leer algunos archivos, e hice una biblioteca llamada CoFS (primero, por Cordova FileSystem, pero está funcionando en algunos navegadores).

Está en estado beta, pero lo uso y funciona bien. Puedes intentar hacer algo como esto:

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

Lo siento, mi pobre inglés.