Tengo un objeto json en una estructura como esta:
Clase->Estudiantes, esta es una representación aproximada de mi clase mecanografiada
export class Classroom { Id:number; Name:string; Students:Student[]=[]; } export class Student { Name:string; Age:number; Sex:string; Image:File; }
mis datos son muy sencillos:
var classroom=new Classroom(); var student1=new Student(); student1.Name="Dexter";student1.Sex="male";student1.Age=28; student1.Image='some file which is uploaded using input type=file' classroom.push(student1); var student2=new Student(); student2.Name="Alex";student2.Sex="male";student2.Age=20; student2.Image='some file which is uploaded using input type=file' classroom.push(student2);
Quiero enviar estos datos a mi api. si no había una imagen, era bastante simple, pero ahora, si uso FormData para agregar cada archivo a un FormData y enviarlo a la API, entonces en el lado de la API no puedo saber qué imagen pertenece a quién.
si agrego mis archivos de imagen a FormData, solo tendré un montón de imágenes en el backend, pero no podré decidir que cada imagen pertenece a quién.
y si trato de enviar datos como un cuerpo de solicitud posterior como este
//service.ts this.http.post(this.apiUrl+'/ControllerPath',classroom,{responseType:"json"});
Me sale un error como este:
System.NotSupportedException: el tipo de colección 'Microsoft.AspNetCore.Http.IHeaderDictionary' en 'Microsoft.AspNetCore.Http.IFormFile.Headers' no es compatible.
¿Existe una manera fácil de entender de enviar varios archivos a la API pero dentro de una clase o con una forma de saber que cada imagen pertenece a quién (en mi caso)?
Una forma de responder a la pregunta es codificar los archivos de imágenes en una cadena usando base64 y luego enviarlos junto con otros datos al lado del servidor.
puede obtener detalles adicionales aquí: ¿Cómo puedo convertir una imagen en una cadena Base64 usando JavaScript?