29 febrero, 2020
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
Suscríbete a nuestro canal en Youtube
SuscríbirseSubir 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.
Indice
En el archivo routes/web.php vamos a incluir dos rutas:
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\CodeaController;
// Mostrar el formulario
Route::get('/codea', [CodeaController::class, 'index']);
// Guardar imagen
Route::post('/codeaguardar', [CodeaController::class, 'codeaguardar']);
//llama a form
Route::get('codea',[CodeaController::class , 'index' ] );
// guardar
Route::post('codeaguardar',[CodeaController::class , 'codeaguardar' ] );
La implementación de formulario puede ser HTML o BLADE. En cualquiera de los dos casos fijemos que los formulario deben estar configurados con el atributo action en POST además de enctype en multipart para permitir subir archivo de tamaño más grande.
En ocaciones debemos configurar los permisos en el servidor web para subir archivos: como el tiempo, el tipo de archivo, el tamaño, etc
Veamos las vistas
Las vistas generadas a partir del método create donde vemos que el formulario invoca al método store POST
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>UPLOAD IMAGENES EN LARAVEL</title>
</head>
<body>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<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>
</div>
</div>
</div>
</body>
</html>
Para usar este formato antes debe contar con el paquete de LaravelCollective. Siga el link si desea instalar LaravelCollective en su proyecto web.
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
{!! Form::open(['method'=>'POST','route'=>['codeaguardar'],'files'=>'true']) !!}
{!! Form::text('nombre',null,['placeholder'=>'Ingrese nombre']) !!}
{!! Form::file('imagen',null) !!}
{!! Form::submit("GUARDAR") !!}
{!! Form::close() !!}
</div>
</div>
</div>
@endsection
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).
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Illuminate\Support\Str;
use App\Models\Post;
class CodeaController extends Controller
{
public function index(){
return view('welcome');
}
public function codeaguardar(Request $request){
$post = new Post();
$post->nombre = $request->nombre;
// Tratamiento de la imagen
if($request->hasFile("imagen")){
$imagen = $request->file("imagen");
$nombreimagen = $imagen->getClientOriginalName();
$ruta = public_path("img/post/");
copy($imagen->getRealPath(),$ruta.$nombreimagen);
$post->imagen = $nombreimagen;
}
$post->save();
}
}
Cómo observados tenremos dos métodosEl método codeaguardar para crear un nuevo registro en la base de datos y guardar la imagen
Ahora veamos los (tres) scripts PHP que nos pueden ayudar a subir una foto al servidor web a la carpeta public/img/post
(*) Tambien podemos renombrar la imagen, pero debemos tener en cuenta la extensión
SUBIR IMÁGENES CON MOVE
public function codeaguardar(Request $request){
$post = new Post();
$post->nombre = $request->nombre;
// Tratamiento de la imagen
if($request->hasFile("imagen")){
$imagen = $request->file('imagen');
$nombreimagen = $imagen->getClientOriginalName();
$ruta = public_path("img/post/");
$imagen->move($ruta,$nombreimagen);
$post->foto = $nombreimagen;
}
$post->save();
}
public function codeaguardar(Request $request){
$post = new Post();
$post->nombre = $request->nombre;
// Tratamiento de la imagen
if($request->hasFile("imagen")){
$imagen = $request->file('imagen');
$nombreimagen = $imagen->getClientOriginalName();
$ruta = public_path('/img/post/'.$nombreimagen);
copy($imagen->getRealPath(),$nuevaruta);
$post->foto = $nombreimagen;
}
$post->save();
}
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?
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Illuminate\Support\Str;
use App\Models\Post;
use Intervention\Image\ImageManagerStatic as Image;
class CodeaController extends Controller
{
public function index(){
return view('welcome');
}
public function codeaguardar(Request $request){
$post = new Post();
$post->nombre = $request->nombre;
// Tratamiento de la imagen
if($request->hasFile("imagen")){
$imagen = $request->file("imagen");
$nombreimagen = $imagen->getClientOriginalName();
$ruta = public_path("img/post/");
Image::make($imagen->getRealPath())->save($ruta);
$post->foto = $nombreimagen;
}
$post->save();
}
}
Simplemente reemplazamos la linea
$nombreimagen = $imagen->getClientOriginalName();
por esta línea, donde tomamos el valor del input nombre transformandolo a formato slug, adicionalmente le agregamos un numero único. finalmente le asignamos la extensión que tiene la imagen.
$nombreimagen = Str::slug($request->nombre).time().'.'.$imagen->getClientOriginalExtension();
Aqui debemos usar Image Interventión para cambiar el formato o extensión de la imagen, el método puede variar un poco, tengamos en cuenta que estamos cambiando el formato de imagen y el nombre a una que estamos subiendo. Veamos
public function codeaguardar(Request $request){
$post = new Post();
$post->nombre = $request->nombre;
// Tratamiento de la imagen
if($request->hasFile("imagen")){
$imagen = $request->file("imagen");
$_nombre = Str::slug($request->nombre);
$_extension = ".webp"; // o cualquier formato como jpg, jpeg, png, gif
$nuevoNombreImagen = $_nombre.'.'.$_extension;
$ruta = public_path("img/post/".$nombreimagen);
Image::make($imagen->getRealPath())->save($ruta)->encode('.webp', 92);
$post->foto = $nuevoNombreImagen;
}
$post->save();
}
También podemos usar directamente la clase de la librería Imagick de PHP... esto queda pendiente.
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 39341 veces
Curso Laravel Desarrollo de un Sistema de Comentarios con Roles
Descarga del código fuente
USD 9.00
Curso Laravel 9 Avanzado Desarrollo Web Administrable para negocio
Descarga del código fuente
USD 10.00
Curso Laravel 11 Desarrollo de una Página Web Administrable
Descarga del código fuente
USD 47.00
Curso ReactJS y Laravel desarrollo fullstack directorio empresarial
Descarga del código fuente
USD 47.00
© Todos los derechos reservados Codea App | ...de frente al código!!! | 2020 - 2023