文件上传

版本 ^2.5.0

Flux 现在提供了一个完整的文件上传组件，面向现代文件处理而构建。拖拽、进度跟踪、文件预览——开箱即用、体验出色。

<flux:file-upload wire:model="photos" multiple>
    <flux:file-upload.dropzone
        heading="将文件拖到此处或点击浏览"
        text="JPG、PNG、GIF，最大 10MB"
    />
</flux:file-upload>

拖放

文件上传组件自动处理拖放。用户可以直接从桌面拖拽文件，或点击浏览——按其所好。当文件被拖入时，组件会使用数据属性自动提供可用的视觉反馈，你可以配合 Tailwind 的 in-data-dragging: 前缀进行样式定制。

紧凑的行内布局

在空间更紧凑的场景中，可为投放区域添加 inline 属性，获得占用垂直空间更少的横向布局：

<flux:file-upload.dropzone
    heading="拖拽文件或点击浏览"
    text="JPG、PNG、GIF，最大 10MB"
    inline
/>

查看行内布局 →

内置进度跟踪

添加 with-progress 属性，组件将显示实时的上传进度。无需额外的 JavaScript——一切都已为你处理。

<flux:file-upload.dropzone
    heading="拖拽文件或点击浏览"
    text="JPG、PNG、GIF，最大 10MB"
    with-progress
/>

该组件暴露了 CSS 变量（--flux-file-upload-progress 与 --flux-file-upload-progress-as-string），因此如有需要，你可以创建自定义的进度指示器。

了解更多进度跟踪 →

完全可定制

flux:file-upload 外层封装处理了所有复杂功能——拖放、文件选择、上传进度——同时允许你自由使用任意自定义 HTML 来定义外观。这非常适合用于自定义头像上传器或特定的文件输入。

<flux:file-upload wire:model="photo">
    <!-- 在此放置你的自定义界面 -->
    <div class="...">
        <flux:icon name="user" />
    </div>
</flux:file-upload>

组件提供了 data-dragging 与 data-loading 属性，你可以配合 Tailwind 的工具类前缀来实现动态视觉反馈。

探索自定义上传器 →

展示已上传文件

flux:file-item 组件可显示已上传文件，支持自动图片预览、文件大小格式化与操作按钮。它会处理所有细节——文件名显示、大小格式化（KB、MB、GB）以及缩略图生成。

@foreach ($photos as $index => $photo)
    <flux:file-item
        :heading="$photo->getClientOriginalName()"
        :image="$photo->temporaryUrl()"
        :size="$photo->getSize()"
    >
        <x-slot name="actions">
            <flux:file-item.remove wire:click="removePhoto({{ $index }})" />
        </x-slot>
    </flux:file-item>
@endforeach

无缝集成 Livewire

与 Livewire 的文件上传系统完美协作。只需添加 wire:model 即可——单文件、多文件、校验、临时 URL，全都能正常工作。

文档包含单文件与多文件上传的完整示例及完整的 Livewire 组件代码。

查看 Livewire 集成示例 →

与原生文件输入同样工作

该文件上传组件会派发与原生 <input type="file"> 元素相同的事件，并拥有相同的属性。这意味着你很可能可以将其与常用的第三方库一起使用。

无障碍内置

我们确保该文件上传组件在移动设备与屏幕阅读器上都能良好工作。所有交互元素都具备恰当的 ARIA 标签，键盘导航符合预期，焦点管理也会自动处理。

查看文件上传文档以获取完整示例与 API 参考。