在 Laravel Livewire 中使用多個影像選擇

在本文中，我將向您展示一個簡單的想法，當您想使用 livewire 和 laravel 來選擇更多圖像時，可以修復先前選擇的圖像丟失的問題。

我知道有多種方法可以實現這一點，但我發現在一些 livewire 生命週期鉤子的幫助下這個方法非常簡單，這些是

更新更新的掛鉤。

此螢幕截圖顯示了您的 livewire 元件類別所需的完整程式碼

讓我們先看看 Updating 和 Updated 鉤子的作用。接下來我會一步步解釋上面截圖中的程式碼。

更新中：

這會在 Livewire 元件資料的任何更新完成之前執行。

更新：

這將在 Livewire 元件資料的任何更新完成後運行。

程式碼解釋如下：

首先，將 WithFileUploads 特徵加入您的元件中。然後聲明以下屬性

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

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

在您的刀片模板中，添加帶有文件類型的輸入標籤，並將模型名稱設置為圖像，如下所示：

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

因此，如果您嘗試選擇多個圖像，Livewire 將處理它並為您渲染圖像，您可以使用以下程式碼新增預覽：

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

上面的程式碼只是在$images屬性即將開始更新時將images屬性的內容儲存在$prevImages屬性中，以防止內容遺失。

第二個是updatedImages方法。請參閱下面的程式碼範例：

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

上面的程式碼將 $prevImages 屬性的資料與新選擇的影像資料合併，然後在更新完成後將其儲存回 $images 屬性。

這是解決本文開頭所述問題最簡單的方法之一。我希望你覺得它有幫助。

感謝您的閱讀！ ！ ！