0

tengo una api rest que recibe un JSON, pero necesito también pasarle un archivo, como podría hacer para enviar en la misma petición el JSON + el archivo?

Este es código que tengo actualmente, si en vez de formData le paso el json, se envía el json correctamente pero el Archivo, y si paso el formData se pasa el fichero pero no el JSON.

prueba(json: any, file: File){
const formData = new FormData();
formData.append('json', json);
formData.append('image', file, file.name);

return this.http.post<any>('http://localhost/tus_comercios_en_casa/kitum_rest_service/public/api/kitum/prueba', formData, {
  headers: {
    'X-Requested-With' : 'XMLHttpRequest'
  }
}).pipe(map(data => {
  return data;
})); }
1
  • En algunos servicios con los que he trabajado el archivo se envia como String en un campo de la estructura json, los bytes del archivo son Codificados en Base64 y se convierten en String, desconozco si es buena o mala práctica.
    – isaac
    Commented el 5 may. 2020 a las 16:49

1 respuesta 1

0

El valor del método .append() no acepta el tipo de dato Object por lo que tendría 2 caminos para lograrlo: Convertir en string y decodificar en el servidor o recorrer el objecto y agregar una a una las propiedades al FormData.

  1. Convertir en string:
prueba(json: any, file: File): Observable<any> {
  const formData = new FormData();
  formData.append('image', file, file.name);
  formData.append('json', JSON.stringify(json));

  const endpoint = 'http://localhost/tus_comercios_en_casa/kitum_rest_service/public/api/kitum/prueba';

  return this.http.post<any>(endpoint, formData, {
    headers: { 'X-Requested-With' : 'XMLHttpRequest' }
  });
}
  1. Iterar el objecto:
// const json: any = {
//   field1: 'lorem ipsum',
//   field2: 'lorem ipsum'
// };

prueba(json: any, file: File): Observable<any> {
  const formData = new FormData();
  formData.append('image', file, file.name);
  Object.entries(json).forEach(([ key, value ]) => {
    formData.append(key, value as string);
  });

  const endpoint = 'http://localhost/tus_comercios_en_casa/kitum_rest_service/public/api/kitum/prueba';

  return this.http.post<any>(endpoint, formData, {
    headers: { 'X-Requested-With' : 'XMLHttpRequest' }
  });
}

La información se encuentra en la documentación:

https://developer.mozilla.org/en-US/docs/Web/API/FormData/append

2
  • El problema es que el JSON que envió no es un JSON sencillo, es un JSON mas complejo, { "parameter_1": { "campo": "Rte El Buey", }, "parameter_2" : { "campo" : "MARJAN S.L", }, "parameter_3" : { "pick_up" : true,, "sub_1" : [ { "campo": "ddd" } ], "sub_2" : [ { "campo": "ddd" } ] } } es algo así Commented el 5 may. 2020 a las 16:53
  • En este caso o bien se puede envíar el JSON como string JSON.stringify() o crear una función recursiva que tome cada una de los elementos del JSON y los envíe en el .append() con el formato: formData.append('parameter_1[campo]', 'Rte El Buey') o formData.append('parameter_3[sub_1][campo]', 'ddd'). Commented el 5 may. 2020 a las 20:22

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.