Laravel Livewire에서 여러 이미지 선택 작업

이 기사에서는 laravel과 함께 livewire를 사용하여 더 많은 이미지를 선택하고 싶을 때마다 이전에 선택한 이미지의 손실을 수정하는 간단한 아이디어를 보여 드리겠습니다.

이를 달성하는 방법에는 여러 가지가 있다는 것을 알고 있지만 라이브와이어 수명 주기 후크의 도움으로 이 방법이 매우 쉽다는 것을 알았습니다.

업데이트 및 업데이트된 후크.

이 스크린샷은 라이브와이어 구성요소 클래스에 필요한 전체 코드를 보여줍니다

먼저 업데이트 및 업데이트 후크가 수행하는 작업을 살펴보겠습니다. 그럼 위 스크린샷의 코드를 차근차근 설명하겠습니다.

업데이트 중:

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 속성이 업데이트를 시작하는 동안 단순히 이미지 속성의 내용을 $prevImages 속성에 저장하는 것입니다.

두 번째는 updateImages 메소드입니다. 아래 코드 샘플을 참조하세요.

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

위 코드는 $prevImages 속성의 데이터를 새로 선택한 이미지/이미지의 데이터와 병합한 다음 업데이트가 완료된 후 $images 속성에 다시 저장합니다.

이는 이 글의 시작 부분에 언급된 문제를 해결하는 가장 간단한 방법 중 하나입니다. 도움이 되셨으면 좋겠습니다.

읽어주셔서 감사합니다!!!