FileUpload 上传文件

开发中经常用到文件上传，不知道有哪些可用，好用的功能。常看文档和源码也比较麻烦。所以就把日常用到的方法全部列出来了，加了备注，注释。

预览效果

使用一览表

use Filament\Forms\Components\FileUpload

Forms\Components\FileUpload::make('background_url')
        ->label('背景图(不上传使用默认主题背景)')
        ->disk('cos') // 存储类型 默认是local 本地存储 cos 腾讯云存储
        ->directory(self::getUploadDirectory())
        ->multiple() // 允许多选 确保向模型属性添加array 类型转换 protected $casts = ['attachments' => 'array'];
        ->minFiles(2) // 最小文件数 当 multiple 为 true 时，此选项生效
        ->maxFiles(5) // 最大文件数 当 multiple 为 true 时，此选项生效
        ->panelLayout('grid') //当 multiple 为 true 时, 设置面板布局 默认是list 列表布局 grid 网格布局
        ->maxParallelUploads(1) // 最大并发上传数 当 multiple 为 true 时，此选项生效 默认值是2
        ->reorderable() // 启用拖拽排序 当 multiple 为 true 时，此选项生效 默认是false
        ->appendFiles() // 会将新上传的文件添加到列表开头，而不是结尾 当 multiple 为 true 时，此选项生效 默认是false
        ->image() // 上传图片
        ->imageResizeMode('force') // force 填充 contain 自适应 cover 覆盖
        ->preserveFilenames() // 保留文件名 默认是false 请务必阅读其安全注意事项。
        ->getUploadedFileNameForStorageUsing( // 自定义文件名 请务必阅读其安全注意事项。
        fn (\Livewire\Features\SupportFileUploads\TemporaryUploadedFile  $file): string => (string) str($file->getClientOriginalName())
        ->prepend('custom-prefix-'),
        )
        ->avatar() // 启用头像模式 允许上传图片，上传后会以紧凑的圆形布局显示，非常适合用作头像
        ->storeFileNamesIn('attachment_file_names') // 保留随机生成的文件名，同时保留原始文件名
        ->imageEditorAspectRatios([ // 允许用户将图像裁剪为宽高比, null 允许用户选择不设置宽高比（“自由裁剪”）
                null,
                '16:9',
                '4:3',
                '1:1',
        ])
        ->imageEditorEmptyFillColor('#000000') // 设置图片编辑器空白的填充颜色
        ->circleCropper() // 启用圆形裁剪器 允许用户将图像裁剪成圆形
        ->previewable() // 启用预览
        ->moveFiles() // 启用移动文件 默认情况下，文件会先上传到 Livewire 的临时存储目录，然后在表单提交时复制到目标目录。如果您希望移动文件，并且临时上传的文件与永久文件存储在同一磁盘上，则可以使用
        ->storeFiles(false) // 防止文件被永久存储 默认是true 表单提交后，将返回一个临时文件上传对象，而不是永久存储的文件路径。这非常适合上传临时文件，例如导入的 CSV 文件
        ->orientImagesFromExif(false) // 禁用从 EXIF 数据自动旋转图像 默认是true
        ->deletable(false) // 禁用通过剪贴板粘贴文件的功能 默认是true
        ->pasteable(false) // 禁用粘贴文件 默认是true
        ->fetchFileInformation(false) // 阻止文件信息获取 默认是true 表单加载时，它会自动检测文件是否存在、大小以及文件类型。所有这些操作都在后端完成。当使用远程存储存储大量文件时，这可能会比较耗时
        ->mimeTypeMap([ // 自定义 MIME 类型映射 默认是false
        '3dm' => 'x-world/x-3dmf',
        'skp' => 'application/vnd.sketchup.skp',
        ])
        ->imageEditor() // 启用图片编辑器
        ->imageEditorMode(2) // 裁剪模式 模式 1 裁剪框可移动，图片固定 ,模式 2 图片可移动，裁剪框固定,模式 3 裁剪框和图片均可移动
        //->imageEditorViewportWidth(1280) // 裁剪框宽度
        //->imageEditorViewportHeight(800) // 裁剪框高度
        ->imageResizeTargetWidth('1280') // **`imageResizeTargetWidth/Height()`**：在客户端**自动调整**图片尺寸，上传的图片会被调整到指定尺寸 在搭配 裁剪模式2 自动剪裁到指定尺寸
        ->imageResizeTargetHeight('800') // 被调整到指定高度
        ->imageCropAspectRatio('1:1') // 裁剪比例
        ->visibility('public') // 公共访问
        ->downloadable() // 启用下载
        ->openable() // 用于在新标签页中打开每个文件
        ->acceptedFileTypes(['image/jpeg', 'image/png']) // 接受的文件类型
        ->maxSize(1024) // 最大文件大小
        ->removeUploadedFileButtonPosition('right') // 称除文件按钮位置
        ->uploadingMessage('上传中...') // 自定义上传中的提示信息
        ->helperText('建议尺寸：1280x800，支持 JPG、PNG 格式，最大 1MB。')

还有更多好用的功能，函数，后期慢慢加起来。

上传图片时自动剪裁到指定尺寸

->imageResizeTargetWidth('500') // **`imageResizeTargetWidth/Height()`**：在客户端**自动调整**图片尺寸，上传的图片会被调整到指定尺寸 在搭配 裁剪模式2 自动剪裁到指定尺寸
->imageResizeTargetHeight('250') // 被调整到指定高度
->imageResizeMode('force')
# 这三个组合，就能上传后自动剪裁到指定尺寸。

加入 Filament 开发交流群，经常分享开源项目，插件，和开发经验

本作品采用《CC 协议》，转载必须注明作者和本文链接