如何在保存时控制Filament中Spatie媒体库字段的图片顺序？

问题原因 #

Filament的enableReordering()仅实现前端拖拽排序，但Spatie媒体库默认不会自动持久化这个顺序，需要手动配置排序字段并处理后端更新逻辑。

解决方案步骤 #

1. 给媒体表添加排序字段 #

首先创建迁移文件，为media表新增排序字段：

php artisan make:migration add_order_to_media_table

编辑迁移文件内容：

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration
{
    public function up()
    {
        Schema::table('media', function (Blueprint $table) {
            $table->unsignedInteger('order')->default(0);
        });
    }

    public function down()
    {
        Schema::table('media', function (Blueprint $table) {
            $table->dropColumn('order');
        });
    }
};

运行迁移：

php artisan migrate

2. 配置模型媒体集合的排序规则 #

在你的模型中，修改registerMediaCollections方法，为images集合指定排序字段：

use Spatie\MediaLibrary\MediaCollections\Models\Media;

public function registerMediaCollections(): void
{
    $this->addMediaCollection('images')
        ->useSortableOrder('order') // 绑定排序字段为刚添加的`order`
        ->acceptsMimeTypes(['image/jpeg', 'image/png', 'image/webp']); // 可选：限制上传图片类型
}

3. 修改Filament字段，添加排序更新逻辑 #

更新你的SpatieMediaLibraryFileUpload字段，通过reorderUsing方法处理拖拽后的排序持久化：

'images' => SpatieMediaLibraryFileUpload::make('images')
    ->label(__('general.images.label'))
    ->collection('images')
    ->columnSpan(2)
    ->imagePreviewHeight('250')
    ->panelLayout('grid')
    ->image()
    ->multiple()
    ->enableOpen()
    ->enableReordering()
    ->reorderUsing(function (Media $media, int $newOrder) {
        $media->update(['order' => $newOrder]);
    }) // 关键：前端拖拽后，后端更新媒体的排序值
    ->uploadProgressIndicatorPosition('left')
    ->disk(app()->environment('local') ? 'public' : config('media-library.disk_name'))
    ->visibility(function () {
        return (config('media-library.disk_name') === 's3') && config('someproject.store_images_private', true) ? 'private' : 'public';
    })
    ->reactive(),

4. 确保查询媒体时按排序字段排序 #

在模型中添加访问器，确保获取images媒体时按排序字段排列：

public function getImagesAttribute()
{
    return $this->getMedia('images')->sortBy('order');
}

或者在Filament的显示/表格组件中，显式按排序字段获取媒体：

// 示例：Filament资源的Show页面
Tables\Columns\ImageColumn::make('images')
    ->collection('images')
    ->getStateUsing(fn ($record) => $record->getMedia('images')->sortBy('order')),

原理说明 #

通过为媒体表添加排序字段，绑定到Spatie媒体集合的排序规则，再通过Filament的reorderUsing回调将前端拖拽的新顺序同步到数据库，最后查询时按该字段排序，即可保证预览顺序与保存后的顺序完全一致。

内容的提问来源于stack exchange，提问作者Rus Taler