Travailler avec plusieurs sélections d'images dans Laravel Livewire

Dans cet article, je vais vous montrer une idée simple pour corriger la perte d'images précédemment sélectionnées chaque fois que vous souhaitez sélectionner plus d'images en utilisant livewire avec laravel.

Je sais qu'il existe plusieurs façons d'y parvenir mais je trouve cette méthode très simple avec l'aide de certains hooks de cycle de vie livewire qui sont les

Mise à jour et crochets mis à jour.

Cette capture d'écran montre le code complet nécessaire à votre classe de composants livewire

Commençons par examiner ce que font les hooks Updating et Updated. Ensuite, j'expliquerai étape par étape les codes dans la capture d'écran ci-dessus.

Mise à jour :

Ceci s'exécute avant que toute mise à jour des données du composant Livewire ne soit terminée.

Mis à jour:

Ceci s'exécute une fois la mise à jour des données du composant Livewire terminée.

L'explication du code est la suivante :

Tout d’abord, ajoutez le trait WithFileUploads à votre composant. Déclarez ensuite les propriétés suivantes

<?php
namespace App\Http\Livewire;
use Livewire\Component;
use Livewire\WithFileUploads;

class Create extends Component {
  use WithFileUploads;
  public $images = [], $prevImages;
}

Dans votre modèle de lame, ajoutez une balise d'entrée avec un type de fichier et définissez le nom du modèle sous forme d'images comme ceci :

<input type="file" wire:model="images" multiple accept="image/jpg,image/jpeg,image/png" />

Donc, si vous essayez de sélectionner plusieurs images, Livewire s'en chargera et restituera l'image pour vous et vous pourrez ajouter un aperçu en utilisant le code ci-dessous :

<div>



<p>The problem with the above code is that anytime you click on the input tag to select a new set of files, the previously selected one(s) is lost during the process. Here is the quick fix I provided using two of the lifecycle hooks in Livewire.</p>

<p>The first one is the updatingImages method. See the code sample below:<br>
</p>

<pre class="brush:php;toolbar:false">public function updatingImages($value) {
    $this->prevImages = $this->images;
}

Le code ci-dessus stocke simplement le contenu de la propriété images dans la propriété $prevImages tandis que la propriété $images est sur le point de commencer la mise à jour afin d'éviter la perte de contenu.

La seconde est la méthode mise à jourImages. Voir l'exemple de code ci-dessous :

public function updatedImages($value) {
    $this->images = array_merge($this->prevImages, $value);
}

Le code ci-dessus fusionne les données de la propriété $prevImages avec les données de la ou des images nouvellement sélectionnées, puis les stocke dans la propriété $images une fois la mise à jour terminée.

C'est l'un des moyens les plus simples de résoudre le problème évoqué au début de cet article. J'espère que cela vous sera utile.

Merci d'avoir lu !!!

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!