Laravel Livewire での複数の画像選択の操作

この記事では、laravel で livewire を使用してさらに画像を選択したい場合に、以前に選択した画像の損失を修正する簡単なアイデアを紹介します。

これを実現するにはいくつかの方法があることは承知していますが、この方法は、いくつかの livewire ライフサイクル フックの助けを借りて非常に簡単であると思います。

更新と更新されたフック。

このスクリーンショットは、livewire コンポーネント クラスに必要な完全なコードを示しています

まず、Updated フックと 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 プロパティに保存しているだけです。

2 番目は updatedImages メソッドです。以下のコードサンプルを参照してください:

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

上記のコードは、$prevImages プロパティのデータを新しく選択した画像のデータとマージし、更新が完了した後にそれを $images プロパティに戻します。

これは、この記事の冒頭で述べた問題を解決する最も簡単な方法の 1 つです。お役に立てば幸いです。

読んでいただきありがとうございます!!!