React+Laravel API图片上传触发Laravel必填验证错误问题

核心问题分析 #

1. 后端验证规则缺失：未添加file规则，导致Validator仅检查字段是否存在，而非是否为有效上传文件；同时代码顺序错误，先处理文件再做验证，存在变量未定义风险。
2. 前端axios请求配置缺失：使用Sanctum时需携带会话凭证，否则可能导致请求解析异常。
3. 后端方法拼写错误：getClientoriginalExtension应为驼峰命名getClientOriginalExtension，会导致文件扩展名获取失败。

解决方案 #

1. 前端代码调整 #

• 将futureImg初始值从数组改为对象，逻辑更匹配：

const [futureImg, setFutureImg] = useState({}); // 原先是[]

• axios请求添加withCredentials配置，确保会话凭证正确携带：

axios.post(`/api/store-product`, productData, { withCredentials: true }).then((res) => {
    // ... 原有逻辑
})

2. 后端控制器代码修复 #

• 调整验证规则，添加file规则，并将验证逻辑移至文件处理之前：
• 修正文件扩展名方法的拼写错误：

public function store(Request $request)
{
    // 先执行验证
    $validator = Validator::make($request->all(), [
        'image' => 'required|file|mimes:png,jpeg,jpg,webp' // 添加file规则
    ]);

    if($validator->fails()){
        return response()->json([
            'status' => 401,
            'validation_error' => $validator->getMessageBag(),
        ]);
    }

    // 验证通过后处理文件
    $storePathDB = null;
    if($request->hasFile('image')){
        $futureImage = $request->file('image');
        $extension = $futureImage->getClientOriginalExtension(); // 修正驼峰拼写
        $imageName = hexdec(uniqid()).'.'.$extension;
        $futureImage->move('upload', $imageName);
        $storePathDB = 'upload/'.$imageName;
    }

    $product = new Product();
    $product->product_future_image = $storePathDB;
    $product->save();

    return response()->json([
        'status' => 200,
        'message' => 'Product Add SuccessFull',
    ]);
}

3. 额外检查项 #

• 前端可在提交前打印FormData，确认文件已正确添加：

console.log(productData.get('image')); // 应输出File对象

• 确保Laravel的upload目录存在且有写入权限，避免文件保存失败。

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