显示侧边栏

Flux Pro 组件

此组件仅在 Flux 的 Pro 版本中提供。

文件上传

一个灵活的文件上传组件，内置拖放支持、文件预览和 Livewire 集成，用于处理应用程序中的文件上传。

上传文件

拖放文件到此处或点击浏览

JPG、PNG、GIF 最大 10MB

Profile_pic.jpg

159 KB

<flux:file-upload wire:model="photos" multiple label="Upload files">    <flux:file-upload.dropzone        heading="Drop files here or click to browse"        text="JPG, PNG, GIF up to 10MB"    /></flux:file-upload><div class="mt-4 flex flex-col gap-2">    <flux:file-item        heading="Profile_pic.jpg"        image="https://fluxui.dev/img/demo/user.png"        size="162400"    >        <x-slot name="actions">            <flux:file-item.remove />        </x-slot>    </flux:file-item></div>

内联布局

要获得更紧凑的界面，请在拖放区域上使用 inline 属性来创建占用较少垂直空间的水平布局。

上传文件

拖放文件或点击浏览

JPG、PNG、GIF 最大 10MB

Profile_pic.jpg

Brand_banner.jpg

<flux:file-upload wire:model="photos" multiple label="Upload files">    <flux:file-upload.dropzone        heading="Drop files or click to browse"        text="JPG, PNG, GIF up to 10MB"        inline    /></flux:file-upload><div class="mt-3 flex flex-col gap-2">    <flux:file-item heading="Profile_pic.jpg">        <x-slot name="actions">            <flux:file-item.remove />        </x-slot>    </flux:file-item>    <flux:file-item heading="Brand_banner.jpg">        <x-slot name="actions">            <flux:file-item.remove />        </x-slot>    </flux:file-item></div>

进度指示器

在拖放区域上使用 with-progress 属性来在文件上传时显示进度指示器。

使用进度指示器时需要 text 属性。

拖放文件或点击浏览

JPG、PNG、GIF 最大 10MB

<flux:file-upload wire:model="photos" multiple label="Upload files">    <flux:file-upload.dropzone        heading="Drop files or click to browse"        text="JPG, PNG, GIF up to 10MB"        with-progress        inline    /></flux:file-upload>

使用 with-progress 时，组件提供了两个 CSS 变量，您可以用于自定义进度实现：

--flux-file-upload-progress - 进度百分比作为小数（例如，"42%"）
--flux-file-upload-progress-as-string - 进度百分比作为引用字符串（例如，"'42%'"）

这些变量在上传过程中会自动更新，可以在您的自定义 CSS 中使用，以创建进度条、圆形指示器或您需要的任何其他视觉反馈。

禁用状态

使用 disabled 属性来阻止用户与文件上传组件的交互。禁用时，拖放区域变为不可点击，拖放功能被禁用，UI 显示为静音状态以表示其处于非活动状态。

上传文件

拖放文件或点击浏览

JPG、PNG、GIF 最大 10MB

<flux:file-upload wire:model="photos" multiple label="Upload files" disabled>    <flux:file-upload.dropzone        heading="Drop files or click to browse"        text="JPG, PNG, GIF up to 10MB"        inline    /></flux:file-upload>

自定义上传器

flux:file-upload 包装器处理所有复杂的文件上传功能 - 拖放、文件选择和上传进度。您可以在其中放置任何自定义 HTML 来完全自定义外观，同时保持所有上传行为。

这是一个自定义头像上传器的示例：

<flux:file-upload wire:model="photo">    <!-- Custom avatar uploader -->    <div class="        relative flex items-center justify-center size-20 rounded-full transition-colors cursor-pointer        border border-zinc-200 dark:border-white/10 hover:border-zinc-300 dark:hover:border-white/10        bg-zinc-100 hover:bg-zinc-200 dark:bg-white/10 hover:dark:bg-white/15 in-data-dragging:dark:bg-white/15    ">        <!-- Show the uploaded file if it exists -->        @if ($photo)            <img src="{{ $photo?->temporaryUrl() }}" class="size-full object-cover rounded-full" />        @else            <!-- Show the default icon if no file is uploaded -->            <flux:icon name="user" variant="solid" class="text-zinc-500 dark:text-zinc-400" />        @endif        <!-- Corner upload icon -->        <div class="absolute bottom-0 right-0 bg-white dark:bg-zinc-800 rounded-full">            <flux:icon name="arrow-up-circle" variant="solid" class="text-zinc-500 dark:text-zinc-400" />        </div>    </div></flux:file-upload>

文件上传包装器自动提供数据属性，您可以使用这些属性来设置自定义上传器的样式：

data-dragging - 当文件被拖放到上传区域时出现
data-loading - 在文件上传过程中出现

可以使用 in-data-dragging: 和 in-data-loading: 实用程序前缀通过 CSS 定位这些属性，以在拖拽和上传状态期间创建动态视觉反馈。

Livewire 集成

文件上传组件与 Livewire 的文件上传功能无缝集成。使用 wire:model 指令将上传的文件绑定到您的 Livewire 组件属性。

单文件上传

对于单文件上传，直接绑定到属性并处理上传文件的显示和删除。

use Livewire\Component;use Livewire\WithFileUploads;use Livewire\Attributes\Validate;class FileUpload extends Component {    use WithFileUploads;    #[Validate('image|max:10240')] // 10MB Max    public $photo;    public function removePhoto()    {        $this->photo->delete();        $this->photo = null;    }    public function save()    {        $this->photo->store(path: 'photos');        return $this->redirect('...');    }}

<!-- Blade view: --><form wire:submit="save">    <flux:file-upload wire:model="photo" label="Upload file">        <flux:file-upload.dropzone heading="Drop file here or click to browse" text="JPG, PNG, GIF up to 10MB" />    </flux:file-upload>    <div class="mt-3 flex flex-col gap-2">        @if ($photo)            <flux:file-item                :heading="$photo->getClientOriginalName()"                :image="$photo->temporaryUrl()"                :size="$photo->getSize()"            >                <x-slot name="actions">                    <flux:file-item.remove wire:click="removePhoto" aria-label="{{ 'Remove file: ' . $photo->getClientOriginalName() }}" />                </x-slot>            </flux:file-item>        @endif    </div>    <flux:button type="submit">Save</flux:button></form>

多文件上传

通过使用数组属性和 multiple 属性来处理多文件上传。

use Livewire\Component;use Livewire\WithFileUploads;use Livewire\Attributes\Validate;class FileUpload extends Component {    use WithFileUploads;    #[Validate(['photos.*' => 'image|max:1024'])]    public $photos = [];    public function removePhoto($index)    {        $photo = $this->photos[$index];        $photo->delete();        unset($this->photos[$index]);        $this->photos = array_values($this->photos);    }    public function save()    {        foreach ($this->photos as $photo) {            $photo->store(path: 'photos');        }        return $this->redirect('...');    }}

<!-- Blade view: --><form wire:submit="save">    <flux:file-upload wire:model="photos" label="Upload files" multiple>        <flux:file-upload.dropzone heading="Drop files here or click to browse" text="JPG, PNG, GIF up to 10MB" />    </flux:file-upload>    <div class="mt-3 flex flex-col gap-2">        @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 }})" aria-label="{{ 'Remove file: ' . $photo->getClientOriginalName() }}" />                </x-slot>            </flux:file-item>        @endforeach    </div>    <flux:button type="submit">Save</flux:button></form>

输入框

用于收集用户输入的文本字段

字段

具有标签和验证状态的结构化表单字段

参考

flux:file-upload

包装上传功能并与表单字段集成的主要文件上传容器组件。

属性	描述
name	表单提交的输入名称属性。
multiple	如果存在，允许选择和上传多个文件。默认值：false。
label	显示在上传区域上方的字段标签文本。
description	显示在字段下方的帮助文本。
error	验证失败时显示的错误消息。
disabled	如果存在，阻止用户与文件上传的交互。默认值：false。

Livewire 指令	描述
wire:model	将文件上传绑定到 Livewire 属性以处理上传的文件。

数据属性	描述
data-dragging	当文件被拖拽到组件上时自动添加。与 Tailwind 的 in-data-dragging: 前缀一起使用进行样式设置。
data-loading	在文件上传过程中自动添加。与 Tailwind 的 in-data-loading: 前缀一起使用进行样式设置。

flux:file-upload.dropzone

用户可以拖放文件或点击浏览文件的可视化拖放区域。

属性	描述
heading	在拖放区域中显示的主要文本。
text	显示在标题下方的支持文本（例如，文件类型和大小限制）。
icon	在拖放区域中显示的图标名称。默认值： cloud-arrow-up.
inline	如果存在，以紧凑的水平布局显示拖放区域。默认值： false.
with-progress	如果存在，在文件上传期间显示进度条而不是仅显示加载旋转器。需要 text 属性被定义。默认值： false.

CSS 变量	描述
--flux-file-upload-progress	上传进度百分比（例如，"42%"）。使用 with-progress时存在.
--flux-file-upload-progress-as-string	上传进度作为引用字符串 (e.g., "'42%'"). 使用 with-progress时存在.

数据属性	描述
data-dragging	当文件被拖拽到拖放区域上时出现在文件上传元素上。
data-loading	在文件上传过程中出现在文件上传元素上。

flux:file-item

显示上传的文件，包含可选的预览图像、文件详情和操作。

属性	描述
heading	要显示的文件名或标题。
text	要显示的附加文本（如果未提供，则从大小自动计算）。
image	文件预览图像的 URL 或路径。
size	文件大小（以字节为单位）。自动格式化为 B、KB、MB 或 GB。
icon	未提供图像时显示的图标。默认值： document.
invalid	如果存在，以错误状态显示文件项。默认值： false.

插槽	描述
actions	用于操作按钮（如删除、下载或预览）的插槽。

flux:file-item.remove

用于文件项的预设样式删除按钮，可以连接到删除操作。

Livewire 指令	描述
wire:click	点击时触发 Livewire 方法来删除文件。
aria-label	删除按钮使用的 aria-label。

文件上传

相关组件

参考