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.