es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Subiendo múltiples imágenes con Livewire

18 Jul, 2023 Programación

Estoy usando livewire y estoy tratando de subir múltiples imágenes para una publicación. Sin embargo, no puedo hacer que funcione. Cuando creo una publicación con imágenes, ninguna imagen se guarda en la base de datos.

class Add extends Component
{
    use WithFileUploads;
    public $post;
    public $users;
    public $body;

    public $image = [];

    public $title;
    public $category = 1;

    protected $rules = [
        'category' => 'required|integer|exists:categories,id',
        'title' => 'required|min:4',
        'body' => 'required|min:4',
    ];

    public function createPost()
    {
        if (auth()->check()) {
            $this->validate();
            $post = Post::create([
                'user_id' => auth()->user()->id,
                'title' => $this->title,
                'category_id' => $this->category,
                'status_id' => $this->status,
                'body' => $this->body,

            ]);
            foreach ($this->image as $photo) {
               $photo->storeAs('posts', str::random(6));
             }
            $post->save();
            session()->flash("message", "Imagen destacada cargada exitosamente");
        }
    }
}
Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para cargar varias imágenes para una publicación utilizando Laravel Livewire, puedes seguir estos pasos:

    1. Agrega el rasgo WithFileUploads a tu componente para habilitar la carga de archivos.
    2. Define una propiedad pública para almacenar las imágenes cargadas. En este ejemplo, estamos usando $image.
    3. Agrega reglas de validación de carga de archivos a tu propiedad $rules del componente.
    4. En tu método createPost, recorre cada imagen cargada y guárdala utilizando el método storeAs.
    5. Guarda la publicación después de que todas las imágenes se hayan cargado y muestra un mensaje de éxito utilizando session()->flash.

    Aquí tienes un ejemplo de código:

    class Add extends Component
{
    use WithFileUploads;

    public $post;
    public $users;
    public $body;
    public $image = [];
    public $title;
    public $category = 1;

    protected $rules = [
        'category' => 'required|integer|exists:categories,id',
        'title' => 'required|min:4',
        'body' => 'required|min:4',
        'image.*' => 'image|max:2048', // añade reglas de validación para la carga de imágenes
    ];

    public function createPost()
    {
        if (auth()->check()) {
            $this->validate();

            $post = Post::create([
                'user_id' => auth()->user()->id,
                'title' => $this->title,
                'category_id' => $this->category,
                'status_id' => $this->status,
                'body' => $this->body,
            ]);

            foreach ($this->image as $photo) {
                $photo->storeAs('posts', Str::random(6) . '.' . $photo->getClientOriginalExtension()); // guarda cada imagen cargada
            }

            $post->save();
            session()->flash("message", "Imágenes destacadas cargadas exitosamente");

            //... el resto de tu código
        }
    }
}

    Asegúrate de haber añadido el código HTML necesario a tu componente Livewire para habilitar la carga de múltiples archivos, por ejemplo:

    <div>
    <label for="image" class="block font-medium text-gray-700">Imágenes:</label>
    <input type="file" wire:model="image" multiple="">
    @error('image.*') <span class="text-red-500">{{ $message }}</span> @enderror
</div>

Comments are closed.