使用 Laravel Livewire 进行阵列管理和预览

Question

当使用输入文件通过 Livewire 加载图像时，我发现如果用户单击以加载多个图像，它可以正常工作，但如果他再次单击相同的输入，使用 Livewire 的预览将被替换select 图片。第二次。要解决此问题，请添加一个按如下方式加载图像的数组：

我的输入文件

<input wire:change="cargaImagenes" wire:model="imagen" type="file" name="imagen" accept="image/*" class="form-control-file" multiple>

活动费用

public function cargaImagenes()
        {
            foreach ($this->imagen as $ima) {
                array_push($this->imagenes, $ima);
            }
        }

问题是我使用 Livewire 按以下方式预览图像：

 @if ($imagenes)
           <small>previsualización:</small>
    
           <div class="form-inline">
             @foreach($imagenes as $img)
              <div wire:key="{{$loop->index}}">
              <div class="m-2 img-thumbnail">
                <img class="my-2 rounded img-fluid contenedor-img" src="{{ $img->temporaryUrl() }}">
                  <button class="btn btn-outline-danger" wire:click="eliminarImagen({{ $loop->index }})">
                  </button>
              </div>
              </div>
             @endforeach
             <br>
            </div>
      @endif

问题是我第一次 select 图片时它们不显示，当我添加更多时它会显示。

对于预览，我使用数组

的 $images 属性

 array_push($this->imagenes, $ima);

你能给我一个建议吗？我可以做些什么来显示数组中的所有图像。

Answer 1

这应该有效。

完全删除 wire:change。

<input wire:model="imagen" type="file" name="imagen" accept="image/*" class="form-control-file" multiple>

挂钩 updatedImagen() 事件方法：

public function updatedImagen()
{
    foreach ($this->imagen as $ima) {
        $this->imagenes[] = $ima;
    }
}

使用 Laravel Livewire 进行阵列管理和预览

Array management and preview with Laravel Livewire

php

laravel

laravel-livewire

laravel-7