如何使用外部HTML表单上传文件到Google Drive并存数据到Google Sheets

实现方案 #

你需要分别修改前端HTML代码和Google Apps Script代码，即可同时实现文件上传到Google Drive、表单文本字段同步写入Google Sheets的需求，修改后的完整代码如下：

前端HTML代码

原有逻辑不需要大改，只需将表单内的文本字段追加到URL参数中即可：

<form id="form">
  <input type="text" name="hobby">
  <input name="file" id="uploadfile" type="file" />
  <input id="submit" type="submit" />
</form>

<script>
  const form = document.getElementById("form");
  form.addEventListener("submit", (e) => {
    e.preventDefault();
    const file = form.file.files[0];
    const fr = new FileReader();
    fr.readAsArrayBuffer(file);
    fr.onload = (f) => {
      // 替换为你自己的Web Apps部署地址
      const url = "https://script.google.com/macros/s/###/exec";

      const qs = new URLSearchParams({
        filename: file.name,
        mimeType: file.type,
        hobby: form.querySelector('input[name="hobby"]').value,
        // 后续新增其他文本字段时，按照上面的格式追加即可
      });

      fetch(`${url}?${qs}`, {
        method: "POST",
        body: JSON.stringify([...new Int8Array(f.target.result)]),
      })
        .then((res) => res.json())
        .then(console.log)
        .catch(console.log);
    };
  });
</script>

后端GAS代码

原有逻辑基本可用，仅需添加空值兜底逻辑避免报错：

var sheetName = 'Sheet1'
var scriptProp = PropertiesService.getScriptProperties()

// 首次部署前先运行一次该函数完成初始化
function intialSetup () {
  var activeSpreadsheet = SpreadsheetApp.getActiveSpreadsheet()
  scriptProp.setProperty('key', activeSpreadsheet.getId())
}

function doPost(e) {
  // 可替换为你指定的Google Drive文件夹ID，默认存在根目录
  const folderId = "root";
  const blob = Utilities.newBlob(
    JSON.parse(e.postData.contents),
    e.parameter.mimeType,
    e.parameter.filename
  );
  const file = DriveApp.getFolderById(folderId).createFile(blob);
  const responseObj = {
    filename: file.getName(),
    fileId: file.getId(),
    fileUrl: file.getUrl(),
  };

  var doc = SpreadsheetApp.openById(scriptProp.getProperty('key'))
  var sheet = doc.getSheetByName(sheetName)

  var headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0]
  var lastRow = sheet.getLastRow();

  var newRow = headers.map(function(header) {
    if(header === "file"){
      return responseObj.fileUrl;
    }
    // 空值兜底，避免表头字段不存在时抛出错误
    return e.parameter[header] || "";
  })
  
  sheet.getRange(lastRow + 1, 1, 1, newRow.length).setValues([newRow]);

  return ContentService.createTextOutput(
    JSON.stringify(responseObj)
  ).setMimeType(ContentService.MimeType.JSON);
}

部署注意事项

1. 首次部署前先运行一次intialSetup函数完成授权和初始化
2. 修改GAS代码后必须重新部署Web Apps，部署时版本要选择「新版本」，访问权限设置为「任何人，甚至匿名用户」
3. 确保你的Google Sheets第一行表头名称和表单提交的字段名完全一致，从你提供的表格结构来看，当前表头hobby、file和代码逻辑完全匹配，可直接使用

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