Cómo subir imágenes en Laravel

Para subir fotos imágenes en Laravel usamos el formulario en POST y el atributo enctype="multipart/form-data" para enviar archivos, de varias formas

Subir imágenes usando Laravel es mucho más sencillo porque dispone de unos métodos que nos facilitan tal proceso de mover la imagen al servidor web e incluso renombrando la imagen. 

  • Generalmente podemos subir imágenes con extensión png, jpg, gif entre los de mayor popularidad.
  • Ten en cuenta que solo puede subir las imagénes mediante los métodos store (POST) y update (PUT) de un CRUD en Laravel.
  • Cabe indicar que este tutorial para subir una foto, solo hará dicha actividad, no realizará ningun tratamiento  a la imagen como reducir el tamaño, el peso, redimensionarla o cambiar de formato. Por tanto la imagen o foto debe estar correctamente tratada:
  1. La imagen debe tener el tamaño adecuado en altura y ancho
  2. La imagen debe tener el peso adecuado en relación con su tamaño.
  3. La imagen debe estar entre los formatos JPG, JPEG, PNG, GIF de las más usados en una aplicación web.

Rutas para subir imagenes en Laravel

//llama a form
Route::get('codea',[CodeaController::class , 'index' ] );
// guardar
Route::post('codeaguardar',[CodeaController::class , 'codeaguardar' ] );

Formulario para subir una Imagen 

La implementación de formulario puede ser html o con blade, en este caso usaremos el método store.

USANDO HTML 

Las vistas generadas a partir del método create donde vemos que el formulario invoca al método store POST

<form action="codeaguardar" enctype="multipart/form-data" method="POST">
   @csrf    
   <input type="text" name="nombre" placeholder="ingrese nombre:">
   <input type="file" name="imagen">
   <button type="submit">GUARDAR</button>
</form> 

USANDO LARAVELCOLLECTIVE BLADE

Para usar este formato antes debe contar con el paquete de LaravelCollective. Siga el link si desea instalar LaravelCollective en su proyecto web.

{!! Form::open(['method'=>'POST','route'=>['codeaguardar'],'files'=>'true']) !!}
            {!! Form::text('nombre',null,['placeholder'=>'Ingrese nombre']) !!}    
            {!! Form::file('imagen',null) !!}
            {!! Form::submit("GUARDAR") !!}
{!! Form::close() !!}

 

FORMAS DE SUBIR IMÁGENES O ARCHIVOS EN LARAVEL

Obviamente estos script se deben implementar dentro del método store del controlador y las imágenes se almacenarán en una carpeta post dentro de otro llamada img en el directorio public (public/img/post).

Controller con los métodos para subir imágenes

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Str;
use App\Models\Post;
class CodeaController extends Controller
{
    public function index(){
        $post = Post::find(1);
        return view('welcome',compact("post"));
    }
    public function codeaguardar(Request $request){
        $post = new Post();
        $post->nombre = $request->nombre;
        // script para subir la imagen
        if($request->hasFile("imagen")){

            $imagen = $request->file("imagen");
            $nombreimagen = Str::slug($request->nombre).".".$imagen->guessExtension();
            $ruta = public_path("img/post/");

            //$imagen->move($ruta,$nombreimagen);
            copy($imagen->getRealPath(),$ruta.$nombreimagen);

            $post->imagen = $nombreimagen;            
            
        }
        $post->save();
        
    }
}

Desglosando el controlador, el método codeaguardar para crear un nuevo registro en la base de datos y guardar  la imagen

public function codeaguardar(Request $request){
        try{
            $model=new Post();
            $model->nombre       =   $request->nombre;

            /// script para subir la imagen

            $model->save();
            return redirect()->route('admin.post.index');
        }
        catch(Exception $e){
            return "Fatal error".$e->getMessage();
        }       
}

Ahora veamos los scripts que nos pueden ayudar a subir una foto al servidor web.

  • SUBIR IMÁGENES CON MOVE
use Illuminate\Support\Str;
if($request->hasfile('imagen')):
 $imagen         = $request->file('imagen');
 $nombreimagen   = Str::slug($request->nombre).".".$imagen->guessExtension();
 //$nombreimagen = $imagen->getClientOriginalName();
 $ruta           = public_path("img/post/");
 $imagen->move($ruta,$nombreimagen);         
 //$model->foto  = $nombreimagen; // asignar el nombre para guardar
endif;
  • SUBIR IMÁGENES CON COPY
use Illuminate\Support\Str;
if($request->hasfile('imagen')):
   $imagen         =   $request->file('imagen');
   $nombreimagen   =   Str::slug("nombre").time().'.'.$imagen->getClientOriginalExtension();
   $nuevaruta      =   public_path('/img/post/'.$nombreimagen);
   copy($imagen->getRealPath(),$nuevaruta);
   //$model->foto  = $nombreimagen; // asignar el nombre para guardar
endif;
  • SUBIR IMÁGENES EL PAQUETE IMAGE INTERVENTION

Para hacer upload de imágenes con el paquete Image Intervention antes debemos realizar el proceso de instalación de dicho paquete. Para poderlo instanciar en el controlador pertinente.

He aqui un tutorial de ¿cómo instalar Image Intervention con Laravel?

use Illuminate\Support\Str;
use Intervention\Image\ImageManagerStatic as Image;
if($request->hasFile('imagen')){
            $imagen        = $request->file("imagen");
            $nombreimagen  = Str::slug($request->nombre).".".$imagen->guessExtension();
            //$nombreimagen= $imagen->getClientOriginalName();
            $ruta = public_path("img/post/");
            Image::make($imagen->getRealPath())->save($ruta);
            //$model->foto  = $nombreimagen; // asignar el nombre para guardar
}

 

La presente implementación solo permite mover el archivo o imagen hacia el servidor, mas no realiza procesamiento alguno para modificar el tamaño, la altura o  ancho, ni tampoco el peso de la imagen. Si queremos modificar estos parámetros talvez no nos ayude este post. En un próximo post emplearemos la dependencia Image Intervention mucho más a fondo .

Asi de sencillo, podemos elevar o hacer upload de imágenes en el framework Laravel.


Leido 35294 veces

Compartir enlace del tutorial

Aprende más sobre Laravel

Cursos de programación

Codea Codea App

México, Colombia, España, Venezuela, Argentina, Bolivia, Perú

© Todos los derechos reservados Codea App | ...de frente al código!!! | 2020 - 2023