Google Apps Script表单图片上传至Drive并写入Sheet的问题修复

问题根源 #

1. 隐藏字段未提交：HTML中的隐藏输入框<input type="hidden" id="himage">缺少name属性，表单提交时不会携带该字段，导致后端postdata.parameters.himage为undefined，触发Utilities.newBlob异常。
2. 参数判断逻辑错误：原代码判断postdata.parameters.image != ''，但postdata.parameters返回的是数组类型，直接判断会出错；且应该校验的是图片数据字段himage而非文件名。
3. 参数取值不严谨：直接使用postdata.parameters.name.toString()，若用户未输入姓名会引发报错。

修复后的代码 #

Code.gs

function doGet(){
  var htmlOutput = HtmlService.createTemplateFromFile("index").evaluate();
  htmlOutput.setTitle("Image Submission Form");
  return htmlOutput;
}

function doPost(postdata){
  Logger.log(JSON.stringify(postdata));

  var sh = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  
  var image_u = '';
  // 修正判断：检查himage是否存在且不为空
  if(postdata.parameters.himage && postdata.parameters.himage[0].trim() !== ''){
    var folder   = DriveApp.getFolderById('你的文件夹ID'); // 替换为实际Folder ID
    // 取数组第一个元素，parameters返回的是数组格式
    var imageData = Utilities.base64Decode(postdata.parameters.himage[0], Utilities.Charset.UTF_8);
    var fileName = postdata.parameters.image[0] || '未命名图片';
    var fileBlob  = Utilities.newBlob(imageData, 'image/png', fileName + '.png');
    var image     = folder.createFile(fileBlob);
    image_u       = image.getUrl();
  }

  var time    = new Date();
  // 安全获取姓名，处理未输入的情况
  var name    = postdata.parameters.name ? postdata.parameters.name[0] : '';

  sh.appendRow([time, name, image_u]);

  var resultpage = HtmlService.createTemplateFromFile("result");
  return resultpage.evaluate();
}

index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <form method="post" name="main_form" action="你的脚本部署URL"> <!-- 替换为实际部署URL -->
      <div id="card_form">
        <label for="name">姓名: </label>
        <input type="text" id="name" name="name">
        <br>
        <label for="image">图片: </label>
        <input type="file" id="image" name="image" accept=".png" onchange="Upload(this,'himage')">
        <!-- 给隐藏字段添加name属性，确保表单提交时携带该数据 -->
        <input type="hidden" id="himage" name="himage">
        <br>
        <br>
        <button type="submit" id="trans">提交</button>
      </div>
    </form>

    <script>
      function Upload(input, id){
        var file = input.files[0];
        var reader = new FileReader();
        reader.fileName = file.name;
        reader.readAsDataURL(file);
        reader.onload = function(){
          var image = document.getElementById(id);
          image.value = reader.result.split(',')[1];
        };
      }
    </script>
  </body>
</html>

额外优化建议 #

• 可以从文件对象中获取实际MIME类型（file.type），替换固定的'image/png'，适配更多图片格式
• 添加前端表单验证，确保姓名和图片都已填写后再提交
• 脚本部署时根据需求调整权限设置（如选择“任何人，甚至匿名”）

内容的提问来源于stack exchange，提问作者初心者にゃんこ