Bekerja dengan berbilang imej pilih dalam Laravel Livewire

Dalam artikel ini, saya akan menunjukkan kepada anda idea mudah untuk membetulkan kehilangan imej/imej yang dipilih sebelum ini apabila anda ingin memilih lebih banyak imej menggunakan livewire dengan laravel.

Saya tahu terdapat beberapa cara untuk mencapai ini tetapi saya dapati kaedah ini sangat mudah dengan bantuan beberapa cangkuk kitaran hayat wayar langsung yang merupakan

Mengemas kini dan cangkuk Dikemas kini.

Tangkapan skrin ini menunjukkan kod penuh yang diperlukan oleh kelas komponen livewire anda

Mari kita mulakan dengan melihat apa yang dilakukan oleh cangkuk Mengemas kini dan Dikemas kini. Kemudian, saya akan menerangkan kod dalam tangkapan skrin di atas langkah demi langkah.

Mengemas kini:

Ini dijalankan sebelum sebarang kemas kini kepada data komponen Livewire selesai.

Dikemas kini:

Ini berjalan selepas sebarang kemas kini kepada data komponen Livewire selesai.

Penjelasan kod adalah seperti berikut:

Mula-mula, tambahkan sifat WithFileUploads pada komponen anda. Kemudian isytiharkan sifat berikut

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

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

Dalam templat bilah anda, tambahkan teg input dengan jenis fail dan tetapkan nama model sebagai imej seperti ini:

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

Jadi jika anda cuba memilih berbilang imej, Livewire akan mengendalikannya dan memaparkan imej untuk anda dan anda boleh menambah pratonton dengan menggunakan kod di bawah:

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

Kod di atas hanyalah menyimpan kandungan sifat imej dalam sifat $prevImages manakala sifat $images akan mula dikemas kini untuk mengelakkan kehilangan kandungan.

Yang kedua ialah kaedah updatedImages. Lihat contoh kod di bawah:

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

Kod di atas menggabungkan data sifat $prevImages dengan data imej/imej yang baru dipilih kemudian menyimpannya semula ke dalam sifat $images selepas kemas kini selesai.

Ini adalah salah satu cara paling mudah untuk menyelesaikan isu yang dinyatakan pada permulaan artikel ini. Saya harap anda dapat membantu.

Terima kasih kerana membaca!!!

Atas ialah kandungan terperinci Bekerja dengan berbilang imej pilih dalam Laravel Livewire. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!