React上传图片至Laravel后端时请求体为空的技术问题

问题背景 #

用Laravel、React和Inertia.js开发电商网站，基于Dropzone实现了图片上传组件，用于产品创建和更新表单。产品创建功能正常，但更新产品时出现异常：仅修改字段不添加图片时更新正常，添加图片后所有字段触发验证错误，仿佛未填写任何内容。通过在Request类中dump请求体发现，包含图片时请求体为空；前端console.log确认数据已正常准备，推测问题出在数据发送方式。

核心原因 #

当请求包含文件时，Inertia默认的put方法会发送JSON格式数据，而文件上传必须使用FormData格式，后端无法解析JSON中的文件对象，导致请求体为空，进而触发所有必填字段的验证错误。

修复步骤 #

1. 修改表单提交逻辑，手动构建FormData #

在ProductForm组件的submit函数中，统一用FormData处理包含文件的请求，通过_method字段模拟PUT请求（因为FormData不支持PUT方法）：

const submit = (event) => {
    event.preventDefault();
    const formData = new FormData();

    // 遍历表单数据，添加到FormData
    Object.keys(data).forEach(key => {
        if (key === 'images') {
            // 处理图片数组，用images[]格式让Laravel正确解析
            data.images.forEach(image => {
                formData.append('images[]', image);
            });
        } else {
            formData.append(key, data[key]);
        }
    });

    if (product) {
        // 模拟PUT请求
        formData.append('_method', 'PUT');
        post(route('admin.products.update', product), { body: formData });
        return;
    }
    // 创建产品也用FormData，保持逻辑统一
    post(route('admin.products.store'), { body: formData });
};

2. 修正ImageUploader组件的useEffect依赖问题 #

原组件中useEffect依赖data会导致不必要的重渲染，改用函数式更新获取最新表单数据，避免数据覆盖：

useEffect(() => {
    setData(prevData => ({ ...prevData, images: files }));
}, [files, setData]);

3. 完善后端验证规则 #

在UpdateProductRequest类中，明确图片字段的验证规则，和前端限制保持一致：

public function rules(): array
{
    return [
        'name' => 'required|string|max:255',
        'description' => 'required|string',
        'sku' => 'required|string|unique:products,sku,'.$this->route('product')->id,
        'track_quantity' => 'sometimes|nullable|boolean',
        'quantity' => 'required_if:track_quantity,true|nullable|int',
        'sell_out_of_stock' => 'required_if:track_quantity,true|boolean',
        'category_id' => 'required|int|exists:categories,id',
        'price' => 'required|numeric|min:0',
        'cost' => 'sometimes|nullable|numeric',
        'discounted_price' => 'sometimes|nullable|numeric',
        'status' => 'required|string|in:active,draft,review',
        'images' => 'sometimes|nullable|array',
        'images.*' => 'image|max:1024', // 对应前端1MB的限制
    ];
}

4. 移除Input的form属性（可选） #

由于通过Inertia手动提交数据，无需绑定到表单，避免潜在冲突：

<input
    {...getInputProps()}
    id="images"
    name="images"
    // 移除 form="productForm"
/>

验证修复 #

修改完成后，测试更新产品时添加图片的场景：

• 后端能正常接收所有表单字段和图片文件
• 验证规则正常触发，不会出现空请求体导致的全字段错误
• 图片能正常上传并关联到产品

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