如何从Vue Signature Pad获取签名并将base64图片传到Laravel后端

问题排查&解决步骤 #

• 问题1：参数名拼写错误
  你向FormData中添加参数时写的键名是signtaure（字母t和u顺序错误），后端使用$request->signature获取参数名称不匹配，自然取不到值。
• 问题2：错误传递了完整返回对象
  this.$refs.signaturePad.saveSignature()返回的是包含isEmpty、data两个属性的对象，你直接把整个对象存入FormData，实际要传递的base64图片内容是返回值里的data字段。

修正代码（直接传base64字符串） #

const { isEmpty, data } = this.$refs.signaturePad.saveSignature();
console.log(isEmpty);
console.log(data);

// 先判断签名非空再提交
if (isEmpty) {
  alert('请先完成签名');
  return;
}
let formData = new FormData();
// 修正拼写错误，传递实际base64内容
formData.append('signature', data);

axios.post('/api/employee/update/27141399-8?api_token='+App.apiToken, formData, config)
 .then(function (response) {
    currentObj.success = response.data.success;
 })

Laravel端直接用你原来的代码就能拿到值：

$base64Content = $request->signature;

可选优化：转成Blob文件传递（适配Laravel文件处理逻辑） #

如果后端需要按文件格式接收，比如要存到存储目录，可以把base64转成Blob再提交：

const { isEmpty, data } = this.$refs.signaturePad.saveSignature();
if (isEmpty) {
  alert('请先完成签名');
  return;
}
// base64转Blob
const byteString = atob(data.split(',')[1]);
const mimeString = data.split(',')[0].split(':')[1].split(';')[0];
const ab = new ArrayBuffer(byteString.length);
const ia = new Uint8Array(ab);
for (let i = 0; i < byteString.length; i++) {
  ia[i] = byteString.charCodeAt(i);
}
const blob = new Blob([ab], { type: mimeString });

let formData = new FormData();
formData.append('signature', blob, 'signature.png');

axios.post('/api/employee/update/27141399-8?api_token='+App.apiToken, formData, config)
 .then(function (response) {
    currentObj.success = response.data.success;
 })

Laravel端可以直接用文件方法处理：

if ($request->hasFile('signature')) {
    $path = $request->file('signature')->store('signatures');
    // 后续存储路径到数据库等逻辑
}

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