无需登录实现自定义HTML表单向Google Forms提交含文件上传请求

核心问题分析 #

Google Form公开表单存在两个限制：一是未登录用户无法直接通过自定义HTML表单上传文件；二是直接提交会强制跳转至Google Form页面。你之前尝试的自身权限代传方案可能未解决跳转和字段关联的问题，这里用**Google Apps Script（GAS）**作为中间层，可同时解决这两个问题，全程无需第三方库，用户无需登录。

实现步骤 #

1. 创建并配置Google Apps Script项目 #

打开Google Drive新建「Google Apps Script」项目，替换默认代码为以下内容：

// 替换为你的Google Form表单ID（从formResponse URL中提取：1FAIpQLSfMx2RaoTxiERtqmRCsGD3zEPOQOhQ8h3lf1MFYIAWtNB7cBA）
const FORM_ID = "1FAIpQLSfMx2RaoTxiERtqmRCsGD3zEPOQOhQ8h3lf1MFYIAWtNB7cBA";
// 替换为存储上传文件的Google Drive文件夹ID
const UPLOAD_FOLDER_ID = "你的文件夹ID";

function doPost(e) {
  try {
    const formData = e.parameter;
    const file = e.files[0];

    // 上传文件到指定Drive文件夹
    const folder = DriveApp.getFolderById(UPLOAD_FOLDER_ID);
    const uploadedFile = folder.createFile(file);
    const fileUrl = uploadedFile.getUrl();

    // 提交数据到Google Form
    const form = FormApp.openById(FORM_ID);
    const responses = form.createResponse();
    // 绑定姓名字段（替换为你的实际字段ID）
    const nameItem = form.getItemById("1492712340").asTextItem();
    responses.withItemResponse(nameItem.createResponse(formData["entry.1492712340"]));
    // 绑定文件链接字段（需在Google Form中新增文本字段存储链接，替换为对应ID）
    const fileUrlItem = form.getItemById("你的文件链接字段ID").asTextItem();
    responses.withItemResponse(fileUrlItem.createResponse(fileUrl));

    responses.submit();

    return ContentService.createTextOutput(JSON.stringify({status: "success", message: "提交成功"}))
      .setMimeType(ContentService.MimeType.JSON);
  } catch (error) {
    return ContentService.createTextOutput(JSON.stringify({status: "error", message: error.message}))
      .setMimeType(ContentService.MimeType.JSON);
  }
}

• 在你的Google Form中新增一个文本字段，用于存储上传文件的Drive链接，记录该字段的ID替换代码中的对应位置
• 运行一次doPost函数，按提示完成权限授权

2. 部署GAS为Web应用 #

• 点击GAS编辑器右上角「部署」→「新部署」
• 类型选择「Web应用」，配置如下：
  • 执行：选择「我」（用你的权限完成上传和提交，用户无需登录）
  • 谁可以访问：选择「任何人，甚至匿名」
• 部署后复制生成的Web应用URL

3. 修改自定义HTML表单 #

用fetch实现异步提交，彻底避免跳转：

<form id="customForm">
  <div>    
    <label>Name</label>    
    <input type="text" name="entry.1492712340" required>
  </div>    
  <div>    
    <label>Image</label>    
    <input type="file" name="image" accept="image/*" required>
  </div>    
  <div>    
    <button type="submit">提交</button>    
  </div>
</form>

<script>
const form = document.getElementById('customForm');
const submitUrl = '你的GAS Web应用URL'; // 替换为刚才生成的URL

form.addEventListener('submit', async (e) => {
  e.preventDefault();
  const formData = new FormData(form);
  
  try {
    const response = await fetch(submitUrl, {
      method: 'POST',
      body: formData
    });
    
    const result = await response.json();
    if (result.status === 'success') {
      alert('提交成功！');
      form.reset();
    } else {
      alert('提交失败：' + result.message);
    }
  } catch (error) {
    alert('网络错误，请重试');
  }
});
</script>

关键说明 #

• 以你的权限完成文件上传和表单提交，用户全程无需登录
• 异步提交完全避免跳转至Google Form页面
• 基于Google官方服务实现，无第三方库依赖

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