Laravel 用户创建时通过 Canvas 签名上传 PNG 文件，常因未在表单提交中正确传递 signature 数据导致存储文件为空或损坏；本文详解问题根源、完整修复方案及安全实践。

laravel 用户创建时通过 canvas 签名上传 png 文件，常因未在表单提交中正确传递 `signature` 数据导致存储文件为空或损坏；本文详解问题根源、完整修复方案及安全实践。

在使用 signature-pad 库结合 Laravel 表单提交用户数据时，一个典型却隐蔽的问题是：签名图像文件被成功创建，但大小恒为 0KB，无法打开。根本原因并非存储逻辑错误，而是 前端未将 Canvas 生成的签名数据实际提交至后端控制器。

你当前的 JavaScript 代码中，fetch('/check-usercode', ...) 仅校验 user_code 是否重复，但该请求并未携带签名数据；而后续真正的表单提交（document.getElementById('userForm').submit()）又未将 signaturePad.toDataURL() 的值注入到表单字段中——导致控制器 $request->signature 始终为空，base64_decode() 处理空字符串后写入磁盘，自然生成 0KB 的无效文件。

✅ 正确解决方案：确保签名数据随表单一同提交

1. 在 HTML 表单中添加隐藏输入域

在你的 Blade 模板中（如

内），添加一个隐藏字段用于承载签名数据：

<input type="hidden" name="signature" id="signature-input" value="">

2. 修改 JavaScript：提交前将 Canvas 数据写入隐藏字段

在点击提交按钮前（即 showConfirmationAlert() 被调用前），将签名转为 base64 并填入隐藏域：

laravel-specialist

精通 Laravel 10+，遵循现代 PHP 实践的 Laravel 专家。擅长优雅语法、Eloquent ORM、队列系统及企业级特性...

下载

// 在 showConfirmationAlert() 函数调用前插入以下逻辑
if (!signaturePad.isEmpty()) {
    document.getElementById('signature-input').value = signaturePad.toDataURL();
} else {
    document.getElementById('signature-input').value = '';
}

✅ 推荐整合进提交事件处理中（替换原 submitButton 监听逻辑）：

document.getElementById('submitButton').addEventListener('click', function(e) {
    e.preventDefault();

    if (signaturePad.isEmpty()) {
        Swal.fire({
            icon: 'error',
            title: 'Oops...',
            text: 'Please provide your signature.',
        });
        return;
    }

    // ✅ 关键：将签名数据写入隐藏 input，确保表单 submit 时携带
    document.getElementById('signature-input').value = signaturePad.toDataURL();

    const userCode = document.getElementById('user_code').value;

    fetch('/check-usercode', {
        method: 'POST',
        body: JSON.stringify({ user_code: userCode }),
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.exists) {
            Swal.fire({
                icon: 'error',
                title: 'Oops...',
                text: 'User code already exists!',
            });
        } else {
            showConfirmationAlert(); // 此时表单已含 signature 字段
        }
    })
    .catch(error => console.error('Error:', error));
});

3. 后端控制器保持简洁可靠（无需修改）

你原有的 store() 方法逻辑正确，只需确保 name="signature" 的字段已通过表单提交到达：

public function store(Request $request)
{
    // ✅ 验证 signature 是否存在且有效
    $signatureData = $request->input('signature');
    if (empty($signatureData) || !str_starts_with($signatureData, 'data:image/')) {
        throw new ValidationException('Invalid or missing signature data.');
    }

    $fileName = time() . '.png';
    $filePath = 'public/signatures/' . $fileName;
    $imageData = base64_decode(preg_replace('#^data:image/\w+;base64,#i', '', $signatureData));

    // ✅ 添加基础校验：避免空内容写入
    if (empty($imageData)) {
        throw new ValidationException('Signature image data is empty.');
    }

    Storage::put($filePath, $imageData);

    $user = User::create([
        'name' => $request->name,
        'user_code' => $request->user_code,
        'password' => Hash::make($request->password),
        'signature_path' => 'signatures/' . $fileName,
    ]);

    $user->jabatans()->attach($request->jabatan_id);
    Session::flash('success', 'User Berhasil Dibuat');
    return redirect()->route('user-create');
}

⚠️ 注意事项与最佳实践

• 不要在 fetch 请求中重复传 signature：/check-usercode 是纯校验接口，职责单一；签名应由最终表单提交承载，符合 REST 语义和 CSRF 安全边界。
• 启用 Laravel 文件验证（可选增强）：可在 store() 中添加：

  $request->validate(['signature' => 'required|string|starts_with:data:image/']);

• 前端防重复提交：在 submit() 后禁用按钮，避免用户多次点击导致多份签名写入。
• 签名预览调试技巧：临时在页面加 ，并设置 preview.src = signaturePad.toDataURL()，实时验证 Canvas 输出是否正常。

通过以上调整，签名数据将稳定、完整地抵达后端，PNG 文件可正常生成并访问，彻底解决“0KB 腐败”问题。核心原则始终是：Canvas 数据必须作为表单字段参与最终提交，而非依赖独立 API 请求传递。