Laravel商品创建表单提交失败：返回空白页且无数据入库

一、Blade模板中的错误 #

• 字段name属性不匹配：
  • 分类字段的name错误设置为name="name"，应改为name="category"
  • 价格字段的name错误设置为name="catchy_title"，应改为name="price"
  • 商品描述的name是name="long_description"，但控制器中使用description，需统一字段名
  • 供应商联系字段的name是name="supplier_contact"，控制器中使用supplier_phone，需统一字段名
• 主图上传字段名称不匹配：主图input的name是primary_image，但控制器判断的是$request->file('image')，需改为$request->file('primary_image')
• HTML结构错误：第一个row模块后多了一个多余的</div>，导致表单结构异常
• 预览图变量大小写错误：$Product->image和$product->image大小写不一致，需统一变量名
• 拼写错误："Primarry Image"标签拼写错误，应为"Primary Image"

二、控制器Store方法中的错误 #

• 验证规则写法完全错误：Laravel的validate方法第一个参数是规则数组，格式应为'字段名' => '验证规则'，而非直接赋值请求参数
• 未执行数据库写入操作：整个方法没有创建Product模型实例并保存到数据库的代码，导致数据无法入库
• 图片保存路径不一致：图片实际保存到upload/home_about/目录，但$save_url写的是upload/products/，路径不统一
• 多图上传未处理：完全忽略表单中的multi_image[]多图上传字段，无对应处理逻辑
• 逻辑分支不完整：仅在上传图片时执行逻辑，未上传图片时无任何返回，导致页面空白
• 验证时机错误：验证应放在图片处理之前，避免无效的图片操作

三、修复后的代码示例 #

修复后的Blade模板关键部分 #

<!-- 分类字段修复 -->
<div class="row mb-3">
    <label for="example-text-input" class="col-sm-2 col-form-label">Category</label>
    <div class="col-sm-6">
        <input name="category" class="form-control" type="text" value="" id="example-text-input">
    </div>
</div>

<!-- 价格字段修复 -->
<div class="row mb-3">
    <label for="example-text-input" class="col-sm-2 col-form-label">Price</label>
    <div class="col-sm-6">
        <input name="price" class="form-control" type="number" value="" id="example-text-input">
    </div>
</div>

<!-- 商品描述字段修复 -->
<div class="row mb-3">
    <label for="example-text-input" class="col-sm-2 col-form-label">Product Description</label>
    <div class="col-sm-8">
        <textarea id="elm1" name="description" placeholder="Please enter a vivid description of the product"></textarea>
    </div>
</div>

<!-- 供应商联系字段修复 -->
<div class="row mb-3">
    <label for="example-text-input" class="col-sm-2 col-form-label">Supplier's Contact</label>
    <div class="col-sm-6">
        <input name="supplier_phone" class="form-control" type="text" value="" id="example-text-input">
    </div>
</div>

<!-- 主图上传字段修复 -->
<div class="row mb-3">
    <label for="example-text-input" class="col-sm-2 col-form-label">Primary Image</label>
    <div class="col-sm-6">
        <input name="primary_image" accept="image/*" class="form-control" type="file" id="primary_image">
    </div>
</div>

<!-- 预览图变量修复 -->
<div class="row mb-3">
    <label for="example-text-input" class="col-sm-2 col-form-label">Primary Image Preview</label>
    <div class="col-sm-6">
        <img id="showImage" class="" width="300px"
             src="{{ !empty($product->image) ? url('upload/products/' . $product->image) : url('upload/no_image.jpg') }}"
             alt="Hero image">
    </div>
</div>

修复后的控制器Store方法 #

public function store(Request $request)
{
    // 先执行验证，规则根据实际需求调整
    $validatedData = $request->validate([
        'name' => 'required|string|max:255',
        'category' => 'required|string|max:255',
        'price' => 'required|numeric',
        'description' => 'required|string',
        'status' => 'required|string|max:50',
        'tags' => 'nullable|string',
        'estimated_delivery_time' => 'nullable|string|max:100',
        'available_quantity' => 'required|integer',
        'colors' => 'nullable|string',
        'supplier_name' => 'nullable|string|max:255',
        'supplier_phone' => 'nullable|string|max:20',
        'video_description' => 'nullable|string',
        'primary_image' => 'nullable|image|mimes:jpeg,png,jpg,gif|max:2048',
        'multi_image.*' => 'nullable|image|mimes:jpeg,png,jpg,gif|max:2048',
    ]);

    $save_url = null;
    // 处理主图上传
    if ($request->file('primary_image')) {
        $image = $request->file('primary_image');
        $name_gen = hexdec(uniqid()) . '.' . $image->getClientOriginalExtension();
        // 统一保存路径为products目录
        Image::make($image)->resize(523, 605)->save('upload/products/' . $name_gen);
        $save_url = 'upload/products/' . $name_gen;
        $validatedData['primary_image'] = $save_url;
    }

    // 处理多图上传（假设存入数据库为逗号分隔的路径字符串）
    $multiImages = [];
    if ($request->file('multi_image')) {
        foreach ($request->file('multi_image') as $img) {
            $imgName = hexdec(uniqid()) . '.' . $img->getClientOriginalExtension();
            Image::make($img)->resize(523, 605)->save('upload/products/' . $imgName);
            $multiImages[] = 'upload/products/' . $imgName;
        }
        $validatedData['other_images'] = implode(',', $multiImages);
    }

    // 创建并保存商品到数据库
    \App\Models\Product::create($validatedData);

    $notification = [
        'message' => 'Product created successfully',
        'alert-type' => 'success'
    ];

    return redirect()->back()->with($notification);
}

额外注意事项 #

1. 确保upload/products/目录存在且有写入权限，可通过命令mkdir -p storage/app/public/upload/products && chmod -R 755 storage/app/public/upload创建并设置权限（若使用公共存储链接，需执行php artisan storage:link）
2. 根据你的Product模型字段调整验证规则和存入的字段名，确保与数据库字段一致
3. 若不需要强制上传主图，可将primary_image的验证规则改为nullable|image...

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