Tengo un servicio en angular para subir las imagenes a un servidor en Node con Express.fileUpload, lo curioso es que desde Postman funciona perfecto y desde Angular tambien funcionaba, pero no recuerdo si he tocado algo que no logro encontrar o ha sido a causa de implementar un HTTPinterceptor, pero el servidor responde con un resquest.files? nulo ( no llega ningun archivo )...
El servicio es el siguiente:
SubirImagen(foto: string) {
const headers = new HttpHeaders({
token: this.userService.usuario.token,
'content-type': 'multipart/form-data'
});
const formData: FormData = new FormData();
formData.append('archivo', this.dataURItoBlob(foto), 'Imagen.jpg');
return this.httpClient.post(
`${this.config.configUrl}/upload/fotosAvisos`,
formData,
{ headers }
);
}
La función para la conversión del dataUri a Blob es esta (La imagen es capturada con el plugin nativo de Capacitor)
dataURItoBlob(dataURI) {
// 'dataURI:image/jpeg;base64,/9j/4UbyRXhpZgAATU0AKgAAAAg...'
try {
let byteString;
if (dataURI.split(',')[0].indexOf('base64') >= 0) {
byteString = atob(dataURI.split(',')[1]);
} else {
byteString = unescape(dataURI.split(',')[1]);
}
const mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
console.log(mimeString); // 'image/jpeg'
console.log(byteString); // 'ÿØÿáFòExif...'
const arrayBuffer = new ArrayBuffer(byteString.length);
const int8Array = new Uint8Array(arrayBuffer);
for (let i = 0; i < byteString.length; i++) {
int8Array[i] = byteString.charCodeAt(i);
}
const blob = new Blob([int8Array], { type: mimeString });
console.log('blob ', blob);
// Blob {size: 2120696, type: "image/jpeg"}
// size: 2120696
// type: "image/jpeg"
return blob;
} catch (error) {
console.log('catch ', error);
}
}
En el interceptor solo tiene la función de hacer el refresco del token, de añadirlo o incorporar las cabeceras necesarias si no las tuviera, pero no controlo las peticiones que contengan 'formData' y esta como lleva las cabeceras desde el servicio, pues no se clona la petición, por lo que no le veo el problema...