添加更多圖像輸入文件

Question

幾天來，我一直在研究如何在沒有結果的情況下改進圖像加載功能。

問題：

1. 通過創建多個圖像上傳按鈕，用戶可以 select 任意數量的圖像。 為了將該過程限制為只能上傳 30 張圖像，我使用 max: 30 並且它似乎工作正常。

如果用戶再次單擊該按鈕，它會將加載的圖像替換為選定的新圖像。 因此，我嘗試創建一個允許添加更多圖像的功能：

我的輸入：

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

添加更多圖像功能：

<button class="text-white btn btn-info btn-sm" wire:click.prevent="add({{$i}})">
     Agregar más fotos
</button>   

@foreach($inputs as $key => $value)        
    <input wire:model="name.{{ $value }}" type="file" name="imagenes" accept="image/*" class="form-control-file">        
@endforeach

我需要的是能夠驗證在視圖中的兩個輸入之間上傳的圖像不超過 30 張。

證實：

$this->validate([
    'imagenes' => 'max:30',
]);

他們可以給我更多的光來完成這個功能。 非常感謝

Answer 1

這有幫助嗎？ 它不允許超過 30 個輸入。 盡管我真的建議您也檢查 Livewire 組件中的圖像總數，因為用戶可以輕松添加更多輸入。

$c = 0;
@foreach($inputs as $key => $value)
    @php if ($c++ > 30) @break @endphp
    <input wire:model="name.{{ $value }}" type="file" name="imagenes" accept="image/*" class="form-control-file">        
@endforeach