删除分类时Image读取为Null的问题排查与解决

问题描述 #

尝试删除自行创建的分类（图片存储在public文件夹）时，出现「尝试读取的image为null」错误，推测该错误与category_id为空有关，请问如何为category对象获取有效的category_id？

现有代码 #

Livewire Controller类

//Controller class
class Index extends Component
{
    use WithPagination;
    protected $paginationTheme = 'bootstrap';

    public $category_id;

    //setting category_id
    public function deleteCategory($category_id)
    {
        $this->category_id = $category_id;
    }

    
    public function destroyCategory() {
        $category = Category::find($this->category_id);
        // dd($this);
        $path = 'uploads/category/'.$category->image;
        if (File::exists($path)) {
            File::delete($path);
        }
        $category->delete();
        session()->flash('message', 'Category Deleted');
        $this->dispatchBrowserEvent('close-modal');
    }

    public function render()
    {
        $categories = Category::orderBy('id', 'DESC')->paginate(10);

        return view('livewire.admin.category.index', ['categories' => $categories]);
    }
}

Blade组件文件

//my blade file
<div>
        <div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog">
              <div class="modal-content">
                <div class="modal-header">
                  <h1 class="modal-title fs-5" id="exampleModalLabel">Category Delete</h1>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form wire:submit.prevent="destroyCategory">

         
                <div class="modal-body">
                  <h6>Are you sure you want to delete this data?</h6>
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                  <button type="submit" class="btn btn-primary">Yes. Delete</button>
                </div>
                </form>
              </div>
            </div>
          </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            @if(session('message'))
            <div class="alert alert-success">{{session('message')}}</div>
            @endif
            <div class="card-header">
                <h4>
                    Category
                    <a href="{{url('admin/category/create')}}" class="btn btn-primary btn-sm float end">Add Category</a>
                </h4>
            </div>
            <div class="card-body">
                {{-- display all categories using livewire --}}
                <table class="table table-bordered table-striped">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Name</th>
                            <th>Status</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($categories as $category)
                        <tr>
                            <td>{{$category->id}}</td>
                            <td>{{$category->name}}</td>
                            <td>{{$category->status == '1' ? "Hidden" : "Visible"}}</td>
                            <td>
                                <a href="{{url('admin/category/'.$category->id.'/edit')}}" class="btn btn-success">Edit</a>
                                <a href="#" wire:click="deleteCategory({{$category->id}})" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#deleteModal">
                                    Delete
                                </a>
                        </tr> 
                        @endforeach
                    </tbody>

                </table>
                <div>
                {{$categories->links()}}
                </div>
            </div>
        </div>
      </div>
    </div>
@push('script')
<script>
    window.addEventListener('close-modal', event => {
        $('#deleteModal').modal('hide');
    })
</script>
@endpush

问题分析 #

报错核心原因是$category对象为null，根源是Bootstrap模态框的原生触发逻辑和Livewire组件状态同步冲突，导致点击删除按钮时设置的$category_id在表单提交时丢失，最终Category::find($this->category_id)返回null，调用$category->image就会触发「image为null」的错误。

修复方案 #

1. 优化Livewire组件逻辑

重命名变量并加强校验，确保category_id有效传递：

class Index extends Component
{
    use WithPagination;
    protected $paginationTheme = 'bootstrap';

    public $delete_id; // 变量名更清晰，区分其他业务ID

    // 存储要删除的分类ID
    public function setDeleteId($category_id)
    {
        $this->delete_id = $category_id;
    }

    public function destroyCategory() {
        // 先校验ID是否有效
        if(!$this->delete_id) {
            session()->flash('error', '无效的分类ID');
            $this->dispatchBrowserEvent('close-modal');
            return;
        }

        // 使用findOrFail确保找到分类，找不到直接抛出异常
        $category = Category::findOrFail($this->delete_id);
        
        // 先判断image字段是否不为空，再处理文件删除
        if($category->image) {
            // 使用public_path生成正确的服务器文件路径
            $path = public_path('uploads/category/' . $category->image);
            if (File::exists($path)) {
                File::delete($path);
            }
        }

        $category->delete();
        session()->flash('message', '分类已删除');
        $this->dispatchBrowserEvent('close-modal');
        // 清空ID，避免重复提交
        $this->delete_id = null;
    }

    public function render()
    {
        $categories = Category::orderBy('id', 'DESC')->paginate(10);
        return view('livewire.admin.category.index', ['categories' => $categories]);
    }
}

2. 调整Blade视图交互

修改删除按钮的触发方法，确保Livewire状态同步：

<!-- 替换原删除按钮代码 -->
<a href="#" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#deleteModal" wire:click="setDeleteId({{$category->id}})">
    删除
</a>

3. 额外健壮性优化

• 给Category模型的image字段设置默认值为空字符串，避免数据库中出现null值
• 始终在操作文件前判断$category->image是否存在，防止拼接空路径
• 使用public_path()生成服务器绝对路径，避免相对路径导致的文件查找失败

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