Yo pase un buen rato tratando de resolver este dilema de imágenes base64 y lo que hice fue lo siguiente:
El formulario:
<form enctype="multipart/form-data">
<input type="file" accept="image/*" @change="onFileChanged($event)">
</form>
La función del input:
onFileChanged: function(event) {
var file = event.target.files[0]; // Se obtiene la imagen desde el evento.
var fileSize = event.target.files[0].size // Se obtiene el tamaño de la imagen.
// Se valida que el tamaño de la imagen sea el admitido.
if (fileSize > 1001024) {
this.companyLogoError = "La imagen no debe pesar mas de 1MB, por favor introduzca una nueva";
this.data.logo = null;
} else { // Si el tamaño es valido, seguimos.
this.companyLogoError = "" // No se muestra el mensaje de error
let reader = new FileReader(); //El objeto FileReader permite que las aplicaciones web lean ficheros
reader.onload = (event) => { // Este evento se activa cada vez que la operación de lectura se ha completado satisfactoriamente.
this.data.logo = event.target.result
};
reader.readAsDataURL(file); // Comienza la lectura del contenido del objeto Blob
}
}
El controlador en Laravel:
public function update(CompanyUpdateRequest $request, $id)
{
$company = Company::find($id);
if ($request->logo) {
$logo = $request->logo; //Se obtienen los datos de la imagen desde la solicitud.
$ext = explode(";", $logo); // Se dividen los datos, en este caso se obtiene la informacion antes del ";" "data:image/jpeg;".
$ext = str_replace('data:image/', '', $ext); // Se reemplazan los datos "data:image/" por vacio para generar una nueva cadena y obtener la extension de la imagen "jpeg".
$ext = $ext[0]; // En este punto $ext es un arreglo de datos, por lo tanto la extension de la imagen se encuentra en la primera posicion "0".
$logo = str_replace('data:image/'. $ext .';base64,', '', $logo); // Se elimina la data inicial de la imagen para luego ser decodificada.
$logo = base64_decode($logo); //Se decodifica la data de la imagen recibida.
$logoName = str_random(20).'.'. $ext; // Se asigna un nombre a la imagen recibida.
Storage::disk('uploads')->put($logoName, $logo); // Se almacena la imagen en public/uploads/image.ext
$request->logo = $logoName;
}
else {
$request->logo = "default-user.png";
}
DB::table('companies')
->where('id', $id)
->update([
'user_id' => $request->user_id,
'name' => $request->name,
'ruc' => $request->ruc,
'address' => $request->address,
'logo' => $request->logo,
'phone' => $request->phone,
'contact' => $request->contact,
'email' => $request->email,
]);
}
En resumen: Validamos que solo sean imagenes en el input con la propiedad accept="image/*", en onFileChanged: function(event), obtenemos la imagen, validamos su peso y la procesamos y en el controlador procesamos el string que nos llega desde vuejs(la explicación del procesamiento esta indicado)..
Disculpa si se ve desordenado pero es mi primer post, espero te solucione!