Posted on by MariaJose

Carga de imagen con Laravel Livewire

carga de imagen

Laravel Livewire | Ejemplo de carga de imagen

En este ejemplo, le mostraré un ejemplo de carga de imagen de Laravel Livewire. Me gustaría compartir con ustedes la carga de una imagen con laravel livewire. puede comprender el concepto de imagen de carga de la tienda Laravel Livewire. Voy a mostrarte cómo subir imágenes en el ejemplo de laravel livewire. Muy bien, vamos a sumergirnos en los pasos.

En este tutorial, crearemos un ejemplo simple de carga de imágenes usando laravel livewire. puede usar la carga de imágenes de laravel livewire con las versiones de Laravel 6, Laravel 7 y Laravel 8.

Aquí, le daré un ejemplo muy simple de cómo crear un formulario de carga de imágenes con un título y un nombre y almacenaré esos datos en la base de datos sin actualizar la página y demasiadas líneas de código en el archivo blade. Usaremos solo el paquete livewire / livewire.

Paso 1: instala Laravel 8

En primer lugar, necesitamos obtener una nueva aplicación de la versión Laravel 8 usando el siguiente comando, así que abra su terminal O el símbolo del sistema y ejecute el siguiente comando:

composer create-project --prefer-dist laravel/laravel blog

Paso 2: Crear la Migración y el Modelo

Aquí, necesitamos crear una migración de base de datos para la tabla de archivos y también, crearemos un modelo para la tabla de archivos.

php artisan make:migration create_files_table

Migración:

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateFilesTable extends Migration

{

public function up()

{Schema::create('files', function (Blueprint $table) {

$table->id();

$table->string('title');

$table->string('name');

$table->timestamps();

});

}

public function down()

{

Schema::dropIfExists('files');

}

}

Emigrar:

php artisan migrate

Ahora crearemos un modelo de archivo usando el siguiente comando:

php artisan make:model File

App/Models/File.php

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class File extends Model

{

use HasFactory;

protected $fillable = [

'title','name'

];

}

Paso 3: Instale Livewire

Ahora en este paso, simplemente instalaremos livewire en nuestra aplicación laravel 8 usando el siguiente comando:

composer require livewire/livewire

Paso 4: Crear componente

Ahora aquí crearemos un componente livewire usando su comando. así que ejecute el siguiente comando para crear el componente de formulario de carga de imágenes.

php artisan make:livewire file-upload

Ahora crearon archivos en ambas rutas:

app/Http/Livewire/FileUpload.php

resources/views/livewire/file-upload.blade.php

Ahora actualizaremos ambos archivos como se muestra a continuación para nuestro formulario de contacto.

app/Http/Livewire/FileUpload.php

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use Livewire\WithFileUploads;
use App\Models\File;

class FileUpload extends Component

{

use WithFileUploads;

public $file, $title;

public function submit()

{

$validatedData = $this->validate([

'title' => 'required',

'file' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048',

]);

$validatedData['name'] = $this->file->store('files', 'public');

File::create($validatedData);

session()->flash('message', 'Image successfully Uploaded.');

}

public function render()

{

return view('livewire.file-upload');

}

}

resources/views/livewire/file-upload.blade.php

<form wire:submit.prevent="submit" enctype="multipart/form-data">

<div>

@if(session()->has('message'))

<div class="alert alert-success">

{{ session('message') }}

</div>

@endif

</div>

<div class="form-group">

<label for="exampleInputName">Title:</label>

<input type="text" class="form-control" id="exampleInputName" placeholder="Enter title" wire:model="title">

@error('title') <span class="text-danger">{{ $message }}</span> @enderror

</div>

<div class="form-group">

<label for="exampleInputName">File:</label>

<input type="file" class="form-control" id="exampleInputName" wire:model="file">

@error('name') <span class="text-danger">{{ $message }}</span> @enderror

</div>

<button type="submit" class="btn btn-success">Save</button>

</form>

Paso 5: Crear ruta

Ahora crearemos una ruta para llamar a nuestro ejemplo, así que agreguemos una nueva ruta al archivo web.php como se muestra a continuación:

routes/web.php

Route::get('image-upload', function () {

return view('default');

});

Paso 6: Crear archivo de vista

Aquí crearemos un archivo blade para la ruta del formulario de llamada. en este archivo, usaremos @livewireStyles, @livewireScripts y @livewire (“formulario de contacto”). así que añádalo.

resources/views/default.blade.php

<!DOCTYPE html>

<html>

<head>

<title>Laravel Livewire Example - raviyatechnical</title>

@livewireStyles

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

</head>

<body>

<div class="container">

<div class="card">

<div class="card-header">

Laravel Livewire Example - raviyatechnical

</div>

<div class="card-body">

@livewire('file-upload')

</div>

</div>

</div>

</body>

@livewireScripts

</html>

Ahora puede ejecutar usando el siguiente comando:

php artisan serve

Abrir debajo de la URL:

http://localhost:8000/image-upload

Recent Post