Estoy tratando de realizar un formulario para administración de documentos, este formulario incluye campos como nombre,área,estatus,fecha...,además de un archivo. El formulario y el archivo se guardan mediante la función registrarDocumento() que hace uso de axios.post, de FormData y append para agregar el archivo y demás datos al request que es enviado al controlador de Laravel,todo esto funciona sin ningún problema, pero al momento de querer realizar el formulario de actualización esta vez mediante axios.put y querer agrupar los datos de la misma forma para recibirlos en el request de Laravel, el controlador esta recibiendo un request vacío.
Estas son mis rutas en Laravel:
Route::post('/documento/registrar','DocumentController@store');
Route::put('/documento/actualizar','DocumentController@update');
Route::get('/documento/show/{document_id}','DocumentController@show');
Esta es la función de mi controlador:
public function update(Request $request)
{
// if (!$request->ajax()) return redirect('/');
return $request;
}
Este es mi componente de Vue:
<template>
<div >
<h1>Documento: {{$route.params.document_id}}</h1>
<!-- Formulario -->
<div class="row">
<div class="col-lg-12">
<div class="ibox ">
<div class="ibox-content">
<h4>Información del Documento</h4>
<hr>
<form enctype="multipart/form-data">
<div class="form-group row justify-content-end">
<label class="col-sm-1 col-form-label">
Estatus:
</label>
<div class="col-lg-2">
<select class="form-control" v-model="status_id">
<option value="0" disabled >Estatus</option>
<option v-for="estatus in arrayEstatus" :key="estatus.status_id" :value="estatus.status_id" v-text="estatus.status_name" > </option>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label">
Nombre del Documento:
</label>
<div class="col-sm-8">
<input type="text" v-model="document_name" class="form-control" placeholder ="Nombre del Documento">
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label">
Tema del Documento:
</label>
<div class="col-lg-3">
<select class="form-control" v-model="theme_id">
<option value="0" disabled >Tema</option>
<option v-for="tema in arrayTema" :key="tema.theme_id" :value="tema.theme_id" v-text="tema.theme_name" > </option>
</select>
</div>
<label class="col-sm-3 col-form-label text-center">
Nivel de Autorización:
</label>
<div class="col-lg-3">
<select class="form-control" v-model="authorization_level_id">
<option value="0" disabled >Nivel de Autorización</option>
<option v-for="nivel in arrayNiveles" :key="nivel.authorization_level_id" :value="nivel.authorization_level_id" v-text="nivel.authorization_level_code" > </option>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label">
Tipo del Documento:
</label>
<div class="col-lg-3">
<select class="form-control" v-model="type_id">
<option value="0" disabled >Tipo</option>
<option v-for="tipo in arrayTipo" :key="tipo.type_id" :value="tipo.type_id" v-text="tipo.type_name" > </option>
</select>
</div>
<label class="col-lg-3 col-form-label text-center">
Fecha de vencimiento:
</label>
<div class="col-lg-3">
<datepicker v-model="expiration_at" :language="es" :bootstrap-styling="true" placeholder="Selecciona una Fecha"
>
</datepicker>
</div>
</div>
<div class="form-group row">
<label class="col-lg-3 col-form-label">
Área:
</label>
<div class="col-lg-3">
<v-select class="style-chooser" :options="arrayArea" v-model="area_id" placeholder="Área"></v-select>
</div>
<label class="col-lg-3 col-form-label text-center">
Alcance:
</label>
<div class="col-lg-3">
<v-select class="style-chooser" :options="arrayAlcance" v-model="scope_id" placeholder="Alcance"></v-select>
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label">
Nombre del Autor:
</label>
<div class="col-lg-3">
<select class="form-control" v-model="employee_id">
<option value="0" disabled >Autor</option>
<option v-for="autor in arrayAutor" :key="autor.employee_id" :value="autor.employee_id" v-text="autor.employee_name" > </option>
</select>
</div>
<label class="col-lg-3 col-form-label text-center" >
Versión:
</label>
<div class="col-lg-2" >
<input style="margin-left:20px;" type="number" v-model="version" class="form-control" placeholder ="Versión" min="0">
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label">
Comentarios:
</label>
<textarea class="form-control col-lg-8" v-model="comments" style="margin-left:15px;" rows="3">
</textarea>
</div>
<div class="form-group row justify-content-center">
<figure>
<embed :src="previa" type="application/pdf" width="100%" height="100%" class="border border-primary" v-show="mostrarEmbed" />
<img width="200" height="200" alt="Vista Previa" :src="previa" v-show="mostrarImg">
</figure>
<p v-show="NoMostrar"> Vista Previa No Disponible</p>
</div>
<div v-show="errorDocumento" class="form-group row div-error">
<div class="text-center text-error">
<div v-for= "error in errorMostrarMsjDocumento" :key="error" v-text="error">
</div>
</div>
</div>
<div class="form-group row justify-content-center">
<input type="file" name="file" id="file" class="inputfile" @change="obtenerImagen" />
<label for="file" class="btn btn-warning">
Cargar Archivo <i class="fa fa-upload"></i>
</label>
</div>
<div class="row justify-content-center">
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-success" style="margin-right:20px;"
@click="registrarDocumento()" v-if = "flag==0">
<i class="fa fa-save"></i> Guardar
</button>
<button type="button" class="btn btn-success" style="margin-right:20px;"
@click="actualizarDocumento()" v-if = "flag==1">
<i class="fa fa-save"></i> Actualizar
</button>
<router-link :to="{name:'admindocs'}" class="btn red-bg text-white" style="margin-right:20px;">
<i class="fa fa-times-circle"></i> Cancelar
</router-link>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Formulario -->
</div>
</template>
<script>
import Swal from 'sweetalert2'
import Datepicker from 'vuejs-datepicker'
import { es } from 'vuejs-datepicker/dist/locale'
export default
{
components: {
Datepicker,
},
data(){
return{
/* Idioma de datepicker*/
es:es,
/* Idioma de datepicker*/
/*Variables para Formulario de documento*/
document_id:this.$route.params.document_id,
document_name : '',
status_id : 0,
theme_id : 0,
type_id : 0,
version : '',
expiration_at:'',
today:'',
employee_id : 0,
comments : '',
authorization_level_id : 0,
area_id:0,
scope_id : 0,
file_id : 0,
flag:0,
file_document:'',
errorDocumento : 0,
errorMostrarMsjDocumento : [],
/*Variables para Arrays de selects*/
arrayArea :[],
area : {
value:0,
label:'',
},
scope : {
value:0,
label:'',
},
arrayAlcance :[],
arrayEstatus :[],
arrayTema :[],
arrayTipo :[],
arrayAutor :[],
arrayNiveles :[],
/* Variables para Formulario de anexos*/
modal : 0,
tituloModal : 'Agregar Anexos',
tipoAccion : 0,
errorAnexo : 0,
errorMostrarMsjAnexo : [],
// variables para almacenamiento y vista previa de archivo
archivo:'',
NoMostrar:0,
mostrarEmbed:0,
mostrarImg:0,
VistaPrevia:'',
tipo_archivo:'',
formato_archivo:'',
// variables para almacenamiento y vista previa de archivo
}
},
computed:{
previa(){
return this.VistaPrevia;
}
},
methods:{
/* Funciones del selects*/
selectScope(){
let me=this;
var url= '/alcance/selectScope';
axios.get(url).then(function (response) {
// console.log(response);
var respuesta= response.data;
me.arrayAlcance = respuesta.alcances;
// console.log(me.arrayArea);
})
.catch(function (error) {
console.log(error);
});
},
selectArea(){
let me=this;
var url= '/area/selectArea';
axios.get(url).then(function (response) {
// console.log(response);
var respuesta= response.data;
me.arrayArea = respuesta.areas;
// console.log(me.arrayArea);
})
.catch(function (error) {
console.log(error);
});
},
selectStatus(){
let me=this;
var url= '/estatus/selectStatus';
axios.get(url).then(function (response) {
// console.log(response);
var respuesta= response.data;
me.arrayEstatus = respuesta.estatus;
// console.log(me.arrayEstatus);
})
.catch(function (error) {
console.log(error);
});
},
selectTheme(){
let me=this;
var url= '/tema/selectTheme';
axios.get(url).then(function (response) {
// console.log(response);
var respuesta= response.data;
me.arrayTema = respuesta.temas;
// console.log(me.arrayArea);
})
.catch(function (error) {
console.log(error);
});
},
selectEmployee(){
let me=this;
var url= '/empleado/selectEmployee';
axios.get(url).then(function (response) {
var respuesta= response.data;
me.arrayAutor= respuesta.empleados;
// console.log(me.arrayArea);
})
.catch(function (error) {
console.log(error);
});
},
selectLevel(){
let me=this;
var url= '/nivel_aut/selectLevel';
axios.get(url).then(function (response) {
var respuesta= response.data;
me.arrayNiveles= respuesta.niveles;
// console.log(me.arrayNiveles);
})
.catch(function (error) {
console.log(error);
});
},
selectType(){
let me=this;
var url= '/tipo/selectType';
axios.get(url).then(function (response) {
var respuesta= response.data;
me.arrayTipo = respuesta.tipos;
})
.catch(function (error) {
console.log(error);
});
},
showDocument(){
let me=this;
var url= '/documento/show/' + this.document_id;
axios.get(url).then(function (response) {
var respuesta = response.data;
me.document_name = respuesta.documento['document_name'];
me.status_id = respuesta.documento['status_id'];
me.theme_id = respuesta.documento['theme_id'];
me.type_id = respuesta.documento['type_id'];
me.version = respuesta.documento['version'];
me.expiration_at = respuesta.documento['expiration_at'];
me.employee_id = respuesta.documento['employee_id'];
me.comments = respuesta.documento['comments'];
me.authorization_level_id = respuesta.documento['authorization_level_id'];
me.area.value = respuesta.documento['area_id'];
me.area.label = respuesta.documento['area_name'];
me.area_id = me.area;
me.scope.value = respuesta.documento['scope_id'];
me.scope.label = respuesta.documento['scope_name'];
me.scope_id = me.scope;
me.file_id = respuesta.documento['file_id'];
me.flag = respuesta.documento['flag'];
me.file_document = respuesta.documento['file_document'];
})
.catch(function (error) {
console.log(error);
});
},
/* Funciones del selects*/
/* Funciones del Modal*/
ListarAnexos(){
console.log('Listar anexos');
},
RegistrarAnexo(){
console.log('registrar anexo');
},
abrirModal(){
this.modal = 1;
},
cerrarModal(){
this.modal=0;
this.errorAnexo = 0;
},
/* Funciones del Modal*/
/* Funciones del CRUD*/
validarElemento(){
this.errorDocumento = 0;
this.errorMostrarMsjDocumento = [];
if (!this.document_name) this.errorMostrarMsjDocumento.push("El nombre del documento no puede estar vacío");
if (!this.expiration_at) this.errorMostrarMsjDocumento.push("El documento debe contar con fecha de vencimiento");
if (this.version <= 0) this.errorMostrarMsjDocumento.push("La versión del documento debe ser mayor a cero");
if (this.status_id == 0)this.errorMostrarMsjDocumento.push("El campo estatus es obligatorio");
if (this.theme_id == 0)this.errorMostrarMsjDocumento.push("El campo tema es obligatorio");
if (this.type_id == 0)this.errorMostrarMsjDocumento.push("El campo tipo es obligatorio");
if (this.employee_id == 0)this.errorMostrarMsjDocumento.push("El campo autor es obligatorio");
if (this.authorization_level_id == 0)this.errorMostrarMsjDocumento.push("El campo nivel de autorización es obligatorio");
if (!this.archivo && this.flag == 0) this.errorMostrarMsjDocumento.push("Debe agregarse un archivo");
if (this.area_id.value == 0)this.errorMostrarMsjDocumento.push("El campo área es obligatorio");
if (this.scope_id.value == 0)this.errorMostrarMsjDocumento.push("El campo alcance es obligatorio");
if (this.errorMostrarMsjDocumento.length) this.errorDocumento = 1;
return this.errorDocumento;
},
obtenerImagen(e){
let file = e.target.files[0];
// console.log(file);
this.archivo = file;
let info_archivo = file.type.split("/", 2);
this.tipo_archivo = info_archivo[0];
this.formato_archivo = info_archivo[1];
// console.log(this.tipo_archivo,this.formato_archivo);
if (this.tipo_archivo == 'image')
{
this.mostrarEmbed =0;
this.NoMostrar=0;
this.mostrarImg =1;
this.cargarImagen(file);
}
else if (this.tipo_archivo == 'video' || (this.tipo_archivo == 'application' && this.formato_archivo =='pdf') || (this.tipo_archivo == 'text' && this.formato_archivo =='plain')) {
this.mostrarImg =0;
this.NoMostrar=0;
this.mostrarEmbed =1;
this.cargarImagen(file);
}
else {
this.mostrarImg =0;
this.mostrarEmbed =0;
this.NoMostrar=1;
}
},
cargarImagen(file){
let reader = new FileReader();
reader.onload = (e)=>{
this.VistaPrevia = e.target.result;
}
reader.readAsDataURL(file);
},
registrarDocumento(){
if (this.validarElemento()) {
return;
}
else {
let me = this;
var request = new FormData();
request.append('documento',this.archivo)
request.append('document_name',this.document_name)
request.append('status_id',this.status_id)
request.append('theme_id',this.theme_id)
request.append('type_id',this.type_id)
request.append('version',this.version)
request.append('expiration_at',this.expiration_at)
request.append('employee_id',this.employee_id)
request.append('comments',this.comments)
request.append('authorization_level_id',this.authorization_level_id)
request.append('area_id',this.area_id.value)
request.append('scope_id',this.scope_id.value)
axios.post('/documento/registrar',request)
.then(res=>{
const swalWithBootstrapButtons = Swal.mixin(
{
customClass: {
confirmButton: 'btn btn-success',
cancelButton: 'btn btn-danger'
},
buttonsStyling: false
})
swalWithBootstrapButtons.fire(
'Guardado!',
'El documento ha sido guarado con éxito',
'success'
)
this.$router.push({ name: 'admindocs' });
})
.catch(function (error) {
console.log(error);
});
}
},
actualizarDocumento(){
if (this.validarElemento()) {
return;
}
else {
let me = this;
const request = new FormData();
request.append('document_id',this.document_id)
request.append('documento',this.archivo)
request.append('document_name',this.document_name)
request.append('status_id',this.status_id)
request.append('theme_id',this.theme_id)
request.append('type_id',this.type_id)
request.append('version',this.version)
request.append('expiration_at',this.expiration_at)
request.append('employee_id',this.employee_id)
request.append('comments',this.comments)
request.append('authorization_level_id',this.authorization_level_id)
request.append('area_id',this.area_id.value)
request.append('scope_id',this.scope_id.value)
axios.put('/documento/actualizar',update )
.then(function (response) {
const swalWithBootstrapButtons = Swal.mixin(
{
customClass: {
confirmButton: 'btn btn-success',
cancelButton: 'btn btn-danger'
},
buttonsStyling: false
})
swalWithBootstrapButtons.fire(
'Guardado!',
'El documento ha sido actualizado con éxito',
'success'
)
this.$router.push({ name: 'admindocs' });
})
.catch(function (error) { console.log(error); });
}
},
/* Funciones del CRUD*/
},
mounted(){
this.selectArea();
this.selectScope();
this.selectStatus();
this.selectTheme();
this.selectType();
this.selectEmployee();
this.selectLevel();
if(this.document_id != 0)
{
this.showDocument();
}
}
}
</script>
<style>
.modal-content{
width: 100% !important;
position: absolute !important;
}
.mostrar{
display: list-item !important;
opacity: 1 !important;
position: absolute !important;
background-color: rgba(255,255,255,0.3) !important;
}
.div-error{
display: flex;
justify-content: center;
}
.text-error{
color: red !important;
font-weight: bold;
}
.inputfile {
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;
}
.inputfile + label {
color: white;
display: inline-block;
}
.inputfile + label {
cursor: pointer;
}
.style-chooser .vs__search::placeholder,
.style-chooser .vs__dropdown-toggle,
.style-chooser .vs__dropdown-menu {
background: #f5f5f5;
border: none;
color: black;
/* text-transform: lowercase;
font-variant: small-caps; */
}
.style-chooser .vs__clear,
.style-chooser .vs__open-indicator {
fill: gray;
}
</style>
FormData
esrequest
y tu haces la petición con una variableupdate
que ni siquiera esta creada.