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 模板中（如 <form id="userForm"> 内），添加一个隐藏字段用于承载签名数据：
<input type="hidden" name="signature" id="signature-input" value="">
2. 修改 JavaScript：提交前将 Canvas 数据写入隐藏字段
在点击提交按钮前（即 showConfirmationAlert() 被调用前），将签名转为 base64 并填入隐藏域：
// 在 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() 后禁用按钮，避免用户多次点击导致多份签名写入。
- 签名预览调试技巧：临时在页面加 <img id="preview" src="" />，并设置 preview.src = signaturePad.toDataURL()，实时验证 Canvas 输出是否正常。
通过以上调整，签名数据将稳定、完整地抵达后端，PNG 文件可正常生成并访问，彻底解决“0KB 腐败”问题。核心原则始终是：Canvas 数据必须作为表单字段参与最终提交，而非依赖独立 API 请求传递。
