Signature Pad无法将签名上传至Google Drive文件夹问题求助

我基于HTML、CSS、JS（Google Apps Script）开发了一款签名上传网页应用，应用能正常启动，但点击「Send」按钮后，画布上的签名无法上传到指定Google Drive文件夹。预期功能是将签名转为PNG格式并存储到目标Drive文件夹中。

错误排查 #

• 前端JS错误：sendToDrive函数中调用signaturePad.toDataURL()后未保存返回值，直接传递了未定义的imageData变量，导致没有实际的图片数据传给后端
• 后端GS错误1：文件夹ID使用了占位符GOOGLE-DRIVE，未替换为真实的Google Drive文件夹ID
• 后端GS错误2：创建文件时引用了不存在的变量signatureAsPicture，实际变量名为signatureAsPictureBlob
• 缺少错误处理：未对google.script.run的调用添加失败回调，无法定位执行错误

修复后的HTML代码 #

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <title>Signature Pad</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="app" class="container">
        <div class="margin text-center">
            <div class="canvas mx-auto"> 
                <h1> Important Contract </h1>
                <p> Description </p>
                <canvas id="sig" width="500px" height="500px" class="border"> </canvas>
                <div> 
                    <button type="button" class="btn btn-dark" id="clearSig">Clear</button>
                    <button type="button" class="btn btn-dark" id="send">Send</button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/signature_pad@4.0.0/dist/signature_pad.umd.min.js"></script>
    <script>
        var signaturePad;
        function setupSignatureBox(){
            var canvas = document.getElementById("sig");
            signaturePad = new SignaturePad(canvas);
        }

        function clearSignature(){
            signaturePad.clear();
        }

        function sendToDrive(){
            // 保存图片数据并指定格式为PNG
            const imageData = signaturePad.toDataURL("image/png");
            // 添加成功/失败回调用于调试
            google.script.run
                .withSuccessHandler(() => alert("签名上传成功！"))
                .withFailureHandler(error => alert(`上传失败：${error.message}`))
                .recieveSignature(imageData);
        }

        document.getElementById("clearSig").addEventListener("click",clearSignature);
        document.getElementById("send").addEventListener("click",sendToDrive);
        document.addEventListener("DOMContentLoaded",setupSignatureBox);
    </script>
</body>
</html>

修复后的Google Apps Script代码 #

function doGet() {
  return HtmlService.createTemplateFromFile("index").evaluate();
}

function recieveSignature(encodedImage){
  try {
    // 替换为你的Google Drive文件夹ID
    const FOLDER_ID = "你的文件夹ID";
    const data = encodedImage.split(",")[1];
    const dataDecoded = Utilities.base64Decode(data);
    const signatureAsPictureBlob = Utilities.newBlob(dataDecoded, "image/png", "somefile.png");
    // 修正变量名，使用正确的Blob变量
    DriveApp.getFolderById(FOLDER_ID).createFile(signatureAsPictureBlob);
    return "上传成功";
  } catch (error) {
    throw new Error(`处理失败：${error.message}`);
  }
}

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