estoy tratando de almacenar un formulario en una base de datos usando laravel, vuejs y axios. En dicho formulario tengo un campo de tipo file para almacenar fotos. Anteriormente cuando trabajaba solamente con laravel usaba un complemento que se llama Intervention Image. que consiste en almacenar la imagen en la carpeta publica y el nombre de la imagen en la base de datos.. Mi pregunta es.. Esto lo puede replicar con vuejs y axios? y si se puede.. como se hace?
Mi funcion store del controlador
public function store(Request $request)
{
//
if(!$request->ajax()) return redirect('/');
$equipo = new Equipo();
$equipo->eq_nombre = $request->eq_nombre;
$equipo->eq_descripcion = $request->eq_descripcion;
$equipo->id_categoria = $request->id_categoria;
if(Input::hasFile('eq_foto')) {
$file=Input::file('eq_foto');
Image::make($request->file('eq_foto'))
->resize(144, 145)
->save(public_path().'/imagenes/equipos/' . $file->getClientOriginalName());
$empresa->eq_foto=$file->getClientOriginalName();
// var_dump($empresa->eq_foto=$file->getClientOriginalName()); die;
}
$equipo->eq_condicion = 1;
$equipo->user_id = Auth::user()->id;
$equipo->save();
}
Mi formulario
<form action="" method="post" enctype="multipart/form-data" class="form-horizontal">
<div class="form-group row">
<label class="col-md-3 form-control-label" for="text-input">Ingrese el nombre del Equipo</label>
<div class="col-md-9">
<input type="text" onKeypress="if(event.keyCode == 13) event.returnValue = false;" v-model="eq_nombre" class="form-control" placeholder="Ingrese el nombre del equipo">
</div>
</div>
<div class="form-group row">
<label class="col-md-3 form-control-label" for="text-input">Ingrese la descripcion del Equipo</label>
<div class="col-md-9">
<input type="text" onKeypress="if(event.keyCode == 13) event.returnValue = false;" v-model="eq_descripcion" class="form-control" placeholder="Ingrese la descripcion del equipo">
</div>
</div>
<div class="form-group row">
<label class="col-md-3 form-control-label" for="text-input">Categoría</label>
<div class="col-md-9">
<select class="form-control" v-model="id_categoria">
<option value="0" disabled>Seleccione</option>
<option v-for="categoria in arrayCategoria" :key="categoria.id" :value="categoria.id" v-text="categoria.cat_nombre">
</option>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-md-3 form-control-label" for="text-input">Ingrese el logo del Equipo</label>
<div class="col-md-9">
<input type="file" class="form-control">
</div>
</div>
<div v-show="errorEquipo" class="form-group row div-error">
<div class="text-center text-error">
<div v-for="error in errorMostrarMsjEquipo" :key="error" v-text="error">
</div>
</div>
</div>
</form>
Mi funcion que hace la peticion
registrarEquipo() {
if(this.validarEquipo()) {
return;
}
let me = this;
axios.post('/equipo/registrar', {
// junto a la url pasamos los parametros que se van a guardar
'eq_nombre' : this.eq_nombre,
'eq_descripcion' : this.eq_descripcion,
'id_categoria': this.id_categoria,
'eq_foto': this.eq_foto
}).then(function (response) {
// si todo sale bien
me.cerrarModal();
// llama a listar fecha y le pasamos la pagina, palabra a buscar y campo
me.listarEquipo(1, '', 'eq_nombre');
}).catch(function (error) {
// si todo sale mal XD;
// handle error
console.log(error);
});
},
Este codigo me funciona.. guarda todo bien.. Pero la imagen no.. No se como tratarlo.