1

Hola estoy subiendo una foto desde Vue pero me la pone en base64 entonces intente decodificarla para tratar la imagen.

así es como tengo mi controlador

  public function Update (ValidatePersonalRequest $request)
{


 if($request->foto)
      {
         $foto  = base64_decode($request->foto);

         $request->foto = $foto;
        
         $url = request()->file('foto')->store('p','public');


         $request['foto'] = $url;

         auth()->user()->update($request->all());


         return 'ok';

      }


   auth()->user()->update($request->all()):
}

En resumen

  : Necesito validar que la imagen sea una imagen.
  : Que lo que reciba en el request viene una imagen si no no hacer nada
  : Guardarla

Pero no me funciona las validaciones, ya que como es base 64 me dice que es un string. Y pues no sirve de nada poner validate . . image|max:2045

2 respuestas 2

3

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!

0

Aunque base64 sea un string, para validar que sea una imagen, te bastaría con comprobar el comienzo de ese string... Ya que sería de esta manera:

data:image/jpeg;base64,/9j/4AAABAQQABAA...

Entonces, capturaríamos el tipo:

$data = 'data:image/jpeg;base64,/9j/4AAABAQQABAA.';
$posicion  = strpos($data, ';');
$tipo = explode(':', substr($data, 0, $posicion))[1];

Para guardar la imagen que viene en base64, podrías usar make

Image::make(file_get_contents($request->foto))->store('p','public');     
    $respuesta = array(
        'status' => 'success',
    );
    return Response::json($respuesta);

Un saludo.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.