Arbeiten mit der Auswahl mehrerer Bilder in Laravel Livewire

In diesem Artikel zeige ich Ihnen eine einfache Idee, den Verlust zuvor ausgewählter Bilder zu beheben, wenn Sie mithilfe von Livewire mit Laravel mehr Bilder auswählen möchten.

Ich weiß, dass es mehrere Möglichkeiten gibt, dies zu erreichen, aber ich finde diese Methode mit Hilfe einiger Livewire-Lifecycle-Hooks, die

, sehr einfach

Aktualisierung und die aktualisierten Hooks.

Dieser Screenshot zeigt den vollständigen Code, der von Ihrer Livewire-Komponentenklasse benötigt wird

Beobachten wir zunächst, was die Hooks Updating und Updated bewirken. Anschließend erkläre ich die Codes im obigen Screenshot Schritt für Schritt.

Aktualisierung:

Dies wird ausgeführt, bevor eine Aktualisierung der Daten der Livewire-Komponente abgeschlossen ist.

Aktualisiert:

Dies wird ausgeführt, nachdem eine Aktualisierung der Daten der Livewire-Komponente abgeschlossen ist.

Die Code-Erklärung lautet wie folgt:

Fügen Sie zunächst die Eigenschaft „WithFileUploads“ zu Ihrer Komponente hinzu. Dann deklarieren Sie die folgenden Eigenschaften

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

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

Fügen Sie in Ihrer Blade-Vorlage ein Eingabe-Tag mit einem Dateityp hinzu und legen Sie den Modellnamen als Bilder wie dieses fest:

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

Wenn Sie also versuchen, mehrere Bilder auszuwählen, kümmert sich Livewire darum und rendert das Bild für Sie. Sie können mithilfe des folgenden Codes eine Vorschau hinzufügen:

<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;
}

Der obige Code speichert lediglich den Inhalt der Eigenschaft „images“ in der Eigenschaft „$prevImages“, während die Eigenschaft „$images“ gerade mit der Aktualisierung beginnt, um den Verlust von Inhalten zu verhindern.

Die zweite ist die Methode „updateImages“. Sehen Sie sich das Codebeispiel unten an:

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

Der obige Code führt die Daten der Eigenschaft „$prevImages“ mit den Daten des/der neu ausgewählten Bild/Bilder zusammen und speichert sie nach Abschluss der Aktualisierung wieder in der Eigenschaft „$images“.

Dies ist eine der einfachsten Möglichkeiten, das am Anfang dieses Artikels genannte Problem zu lösen. Ich hoffe, Sie finden es hilfreich.

Danke fürs Lesen!!!

Das obige ist der detaillierte Inhalt vonArbeiten mit der Auswahl mehrerer Bilder in Laravel Livewire. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!