Laravel Livewire多文件上传报错：S3临时驱动仅支持单文件

按照Livewire 2.x文档配置多文件上传：

• 组件公共属性设为数组：public $photos = []
• input标签添加multiple属性
• 使用WithFileUploads trait

但前端选择文件时立即抛出异常：

S3 temporary file upload driver only supports single file uploads. Remove the [multiple] HTML attribute from your input tag.

问题发生在Livewire更新photos属性状态阶段，尚未执行save方法，且官方文档未提及此限制。

Livewire的临时文件上传机制中，当配置S3作为临时存储驱动时，默认的临时上传逻辑不支持多文件批量上传——它会尝试一次性将所有选中的文件上传到S3临时存储，而该驱动在这个阶段仅支持单文件处理。

方案1：切换临时存储到本地，再移至S3 #

修改Livewire配置文件config/livewire.php，将临时上传驱动改为本地：

return [
    ...
    'temporary_file_upload' => [
        'driver' => 'local', // 从s3改为local
        'disk' => 'local', // 对应filesystems.php中配置的本地磁盘
        'rules' => 'file|max:12288', // 可根据需求调整文件验证规则
        'directory' => 'livewire-tmp',
        'middleware' => 'throttle:60,1',
        'preview_mimes' => [
            'png', 'gif', 'bmp', 'svg', 'wav', 'mp4',
            'mov', 'avi', 'wmv', 'mp3', 'm4a',
            'jpg', 'jpeg', 'webp', 'pdf',
        ],
        'max_upload_time' => 5,
    ],
    ...
];

然后在组件的save方法中，循环将临时文件移至S3：

public function save()
{
    foreach ($this->photos as $photo) {
        $path = $photo->store('photos', 's3');
        // 此处添加将$path存入数据库等业务逻辑
    }

    $this->photos = []; // 清空上传列表
}

方案2：用单文件上传模拟多文件体验 #

如果不想修改临时驱动配置，可以改用单文件input，通过组件逻辑实现多文件添加的体验：

组件代码：

class UploadPhotos extends Component
{
    use WithFileUploads;
    public $photo;
    public $photos = [];

    public function addPhoto()
    {
        if ($this->photo) {
            $this->photos[] = $this->photo;
            $this->photo = null; // 清空当前input，允许继续选择新文件
        }
    }

    public function save()
    {
        foreach ($this->photos as $photo) {
            $path = $photo->store('photos', 's3');
            // 业务逻辑处理
        }

        $this->photos = [];
    }
}

前端视图：

<form wire:submit.prevent="save">
    <input type="file" wire:model="photo">
    <button type="button" wire:click="addPhoto">添加照片</button>

    <div>已选择的照片：</div>
    @foreach($photos as $index => $photo)
        <div>{{ $photo->getClientOriginalName() }}</div>
    @endforeach

    <button type="submit">保存所有照片</button>
</form>

方案3：自定义临时上传逻辑（进阶） #

通过自定义Livewire的临时上传处理器来支持S3多文件临时存储，需要深入Livewire底层扩展逻辑，适合有Laravel扩展开发经验的开发者。

内容的提问来源于stack exchange，提问作者Phil Tune