Estoy tratando de enviar un archivo usando Axios en Laravel y Vuejs. Todos los datos almacenados en variantsProd variable a continuación:

 data() { return { form: new Form({ variantsProd: [], imagesFile: [], }), }; },

Las variantsProd contienen los siguientes datos:

El problema está en el atributo imagesFile . Contiene un archivo. Si mantengo el archivo de imagesFile con un valor vacío [] , funciona, se pueden enviar todos los datos. Pero si adjunto una imagen, siempre obtengo 500 (Error interno del servidor). No tengo idea porque sucede esto?

 let getImg = []; this.form.variantsProd.forEach((item) => { let totalImagesFile = $('.images' + item.id)[0].files.length; //Total Images let imagesFile = $('.images' + item.id)[0]; for (let i = 0; i < totalImagesFile; i++) { getImg.push(imagesFile.files[i]); } //this.imagesFile = getImg; this.form.imagesFile = getImg; }); this.form .post('api/staff/products/store', { header: { 'Content-Type': 'content-type': 'multipart/form-data; boundary=---------------------------974767299852498929531610575', }, }) .then((response) => { console.log(response); if (this.form.isVariantExists > 0) { this.validateVariants(response); } else { this.$router.push({ name: 'products-index' }); this.showSuccessMsg(response); } }) .catch((error) => { console.log(error); swal.fire({ icon: 'error', title: 'Oouch...', text: 'Something went wrong! Make sure you input the valid data!', footer: '<a href>Why do I have this issue?</a>', }); }) .finally(() => { $('#loadingButton').attr('disabled', false); $('.proc-regis').remove(); $('#loadingButton').html(`Save`); });

FYI: estoy usando bootstrap-fileinput en este caso.