Google App Script文件上传功能异常排查与集成需求

一、解决文件上传至Google Drive时的黑屏问题 #

黑屏多由异步请求未处理、函数异常或权限配置错误导致，按以下步骤修复：

1. 完善后端函数的异常捕获 #

确保上传文件的Google Apps Script函数包含完整的错误处理，避免未捕获异常阻断请求：

function uploadToDrive(file, targetFolderId) {
  try {
    const targetFolder = DriveApp.getFolderById(targetFolderId);
    const uploadedFile = targetFolder.createFile(file);
    return {success: true, fileUrl: uploadedFile.getUrl()};
  } catch (err) {
    return {success: false, errorMsg: err.toString()};
  }
}

2. 前端异步请求的正确处理 #

调用google.script.run时必须绑定成功/失败回调，同时添加加载提示避免用户误判为黑屏：

function handleFileSelect(event) {
  const selectedFile = event.target.files[0];
  if (!selectedFile) return;

  // 显示加载状态
  document.getElementById('upload-loading').style.display = 'block';

  google.script.run
    .withSuccessHandler(res => {
      document.getElementById('upload-loading').style.display = 'none';
      res.success 
        ? alert(`上传成功：${res.fileUrl}`) 
        : alert(`上传失败：${res.errorMsg}`);
    })
    .withFailureHandler(err => {
      document.getElementById('upload-loading').style.display = 'none';
      alert(`请求出错：${err.toString()}`);
    })
    .uploadToDrive(selectedFile, '你的目标文件夹ID');
}

3. 验证WebApp部署权限 #

重新部署WebApp时，确保：

• 执行权限选择**"以访问Web应用的用户身份执行"**
• 访问权限根据需求选择**"任何人，甚至匿名用户"或"仅限组织内用户"**
  权限配置错误会直接导致请求被拦截，引发页面无响应。

4. 排查前端DOM错误 #

打开浏览器开发者工具（F12）的Console面板，查看是否有JS报错（比如元素未找到、非法DOM操作），针对性修复。

二、WebAppBoot页面上传按钮集成 #

将以下代码嵌入WebAppBoot页面的对应位置：

1. 添加上传按钮的HTML结构 #

在页面操作区域插入：

<div class="upload-container">
  <input type="file" id="file-upload-input" accept=".pdf,.docx,.xlsx" style="display:none;">
  <button onclick="document.getElementById('file-upload-input').click()">选择文件上传至Drive</button>
  <p id="upload-loading" style="display:none; color:#2196F3; margin-top:10px;">正在上传...</p>
</div>

2. 绑定文件选择事件 #

在页面的<script>标签中添加事件绑定：

document.getElementById('file-upload-input').addEventListener('change', handleFileSelect);

// 复用上面的handleFileSelect函数
function handleFileSelect(event) {
  // 函数内容同上
}

3. 可选样式优化 #

为上传区域添加基础样式提升体验：

.upload-container {
  margin: 20px 0;
  padding: 15px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
}

.upload-container button {
  padding: 8px 16px;
  background-color: #2196F3;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

三、验证步骤 #

1. 重新部署WebApp，确保代码更新生效；
2. 点击上传按钮选择文件，确认加载提示正常显示，无黑屏；
3. 检查目标Drive文件夹是否收到上传文件；
4. 测试异常场景（如无效文件夹ID、超大文件），确认错误提示正常弹出。

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