How to save an image from vue

Question

How to save an image from vue

Navigation

#1 by (2 votes)
#2 by (0 votes)

1

Hi, I'm uploading a photo from Vue but I put it in base64 then try to decode it to deal with the image.

that's how I have my driver

  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()):
}

In summary

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

But validations do not work for me, since as it is base 64 it tells me that it is a string. And then it's no use putting validate. . image | max: 2045

laravel vue.js

asked by Alex Burke Cooper 18.11.2018 в 20:16

source

2 answers

Remove the last word of a string jquery or javascript Trigger insert, update

score 2 · Answer 1

I had a good time trying to solve this base64 image dilemma and what I did was the following:

The form:

<form enctype="multipart/form-data">
  <input type="file" accept="image/*" @change="onFileChanged($event)">
</form>

The input function:

 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
  }
}

The driver in 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,
        ]);
}

In summary: We validate that they are only images in the input with the property accept="image / *", in onFileChanged: function (event), we obtain the image, we validate its weight and process it and in the controller we process the string that arrives to us from vuejs (the explanation of the processing is indicated) ..

Sorry if it looks messy but it's my first post, I hope you solve it!

score 0 · Answer 2

Although base64 is a string, to validate that it is an image, it would be enough to check the beginning of that string ... Since it would be like this:

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

Then, we would capture the type:

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

To save the image that comes in base64, you could use make

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

Greetings.