Livewire多文件上传教程：实现高效图片管理

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use Livewire\WithFileUploads; // 引入WithFileUploads trait
use App\Models\Post; // 假设你的Post模型

class AddPost extends Component
{
    use WithFileUploads; // 使用trait

    public $title;
    public $body;
    public $category = 1;
    public $images = []; // 用于存储多个上传文件的数组

    protected $rules = [
        'category' => 'required|integer|exists:categories,id',
        'title' => 'required|min:4',
        'body' => 'required|min:4',
        'images.*' => 'image|max:1024', // 对数组中的每个图片进行验证，最大1MB
    ];

    // ... 其他方法
}

<form wire:submit.prevent="createPost">
    <div>
        <label for="title">标题</label>
        <input type="text" id="title" wire:model="title">
        @error('title') <span class="error">{{ $message }}</span> @enderror
    </div>

    <div>
        <label for="body">内容</label>
        <textarea id="body" wire:model="body"></textarea>
        @error('body') <span class="error">{{ $message }}</span> @enderror
    </div>

    <div>
        <label for="category">分类</label>
        <select id="category" wire:model="category">
            <!-- 假设这里有分类选项 -->
            <option value="1">分类一</option>
            <option value="2">分类二</option>
        </select>
        @error('category') <span class="error">{{ $message }}</span> @enderror
    </div>

    <div>
        <label for="images">上传图片</label>
        <input type="file" id="images" wire:model="images" multiple>
        @error('images.*') <span class="error">{{ $message }}</span> @enderror
        @error('images') <span class="error">{{ $message }}</span> @enderror
    </div>

    <button type="submit">创建帖子</button>
</form>

// ... 在 AddPost Livewire 组件中

public function createPost()
{
    // 确保用户已登录
    if (!auth()->check()) {
        session()->flash("error", "请先登录才能创建帖子。");
        return;
    }

    // 验证所有输入数据，包括图片
    $this->validate();

    // 创建帖子记录。Post::create() 会自动保存到数据库，无需额外的 $post->save()
    $post = Post::create([
        'user_id' => auth()->user()->id,
        'title' => $this->title,
        'category_id' => $this->category,
        // 'status_id' => $this->status, // 如果有status字段
        'body' => $this->body,
    ]);

    // ... 接下来处理图片上传和关联
}

// ... 在 createPost 方法中，紧接在 Post::create() 之后

// 存储图片并与帖子关联
foreach ($this->images as $image) {
    // 生成一个唯一的文件名，并保留原始扩展名
    $fileName = uniqid() . '.' . $image->extension();

    // 将图片存储到 'posts' 目录下 (例如：storage/app/public/posts)
    // 确保你的文件系统配置正确，并且 public 存储链接已创建 (php artisan storage:link)
    $path = $image->storeAs('posts', $fileName, 'public'); // 使用 'public' 磁盘

    // 将图片路径保存到数据库中。
    // 这通常意味着你需要一个单独的 Image 模型和表，与 Post 模型建立一对多关系。
    $post->images()->create([
        'path' => $path,
        'name' => $fileName, // 可以保存文件名
        // 'alt_text' => '图片描述', // 可以添加其他字段
    ]);
}

session()->flash("message", "帖子和图片已成功上传！");

// 重置表单字段
$this->reset(['title', 'body', 'category', 'images']);
}

// php artisan make:migration create_images_table
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateImagesTable extends Migration
{
    public function up()
    {
        Schema::create('images', function (Blueprint $table) {
            $table->id();
            $table->foreignId('post_id')->constrained()->onDelete('cascade');
            $table->string('path'); // 存储图片路径
            $table->string('name')->nullable(); // 存储文件名
            $table->string('alt_text')->nullable(); // 存储alt文本
            $table->timestamps();
        });
    }

    public function down()
    {
        Schema::dropIfExists('images');
    }
}

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Image extends Model
{
    use HasFactory;

    protected $fillable = [
        'post_id',
        'path',
        'name',
        'alt_text',
    ];

    public function post()
    {
        return $this->belongsTo(Post::class);
    }
}

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Post extends Model
{
    use HasFactory;

    protected $fillable = [
        'user_id',
        'title',
        'category_id',
        'status_id',
        'body',
    ];

    public function images()
    {
        return $this->hasMany(Image::class);
    }

    // ... 其他关联或方法
}