Hola tengo un problema sencillo. Tengo dos objetos en Javascript que intento pasar juntos a mi servidor usando Axios.
Primero, un objeto simple con propiedades y valores simples:
var object1 = { type: {color: "red", variants: [1,2,4,5]}, content: "xxx" }También un segundo objeto que contiene imágenes de archivo
let imagesLocalForm = new FormData(); this.imagesLocal.forEach(img => { imagesLocalForm.append("productPhotos[]", img[0]); });Enviar cualquiera de los objetos por sí mismos transferirá con éxito los datos al servidor. SIN EMBARGO, una vez que combino los datos en una matriz u otro objeto, todas las imágenes del objeto del formulario desaparecerán. ex:
var data = [object1, imagesLocalForm];o
var data = {info: object1, images: imagesLocalForm};Yo uso este código Axios para publicar los datos:
Axios.post(this.ADD_MULTI_PRODUCT_API_ENDPOINT, data) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); Cuando dd() la matriz de datos, la respuesta que recibo es:
array:2 [ 0 => array:2 [ "type" => array:2 [ "color" => "red" "variants" => array:4 [ 0 => 1 1 => 2 2 => 4 3 => 5 ] ] "content" => "xxx" ] 1 => [] ] Cuando hago dd() desde mi servidor php, recibo todos mis datos de object1 pero ninguno de los datos de imagesLocalForm . ¿Alguien podría explicarme este comportamiento?
No puede publicar datos JSON y datos de formulario en el mismo punto final, simplemente sería imposible porque el cuerpo de la solicitud solo puede tener un tipo de contenido. Pero puede agregarle datos adicionales a su objeto FormData existente.
Para hacer eso:
let imagesLocalForm = new FormData(); this.imagesLocal.forEach(img => { imagesLocalForm.append("productPhotos[]", img[0]); }); const object1 = { type: "big", content: "xxx" } for (const key of Object.keys(object1)) { imagesLocalForm.append(key, object1[key]); } Luego, puede simplemente pasar imagesLocalForm a su punto final de back-end