Google Apps Script文件上传至Drive报错排查求助

核心问题分析 #

1. 错误获取上传文件：点击按钮时，你获取的是按钮的value（如"File"/"Foto"/"Video"字符串），而非用户通过文件选择框选中的文件，导致后端接收到的不是可上传的文件对象，调用createFile时触发报错。
2. 重复定义回调函数：三次定义onSuccess函数，后续定义会覆盖前序的，导致所有成功回调都会显示"Video Uploaded succesful"。
3. 属性拼写错误：文件输入框的mulitple应为multiple，否则无法多选文件。

修改后的前端代码（index.html） #

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <title>Upload Files</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
  </head> 
  <body>
    <h1>File Uploader</h1>
    <div id="form" style="text-align:center;display:block">
    <form id="uploadForm">
        <input class="form-control" type="file" name="myFile" multiple>
        <br>
        <br>
        <div>
          <h3>Choose Folder to upload</h3>
          <h6>Max. 50MB</h6>
          <input class="btn btn-outline-secondary" type="button" data-folder="file" value="File">
          <input class="btn btn-outline-secondary" type="button" data-folder="photo" value="Foto">
          <input class="btn btn-outline-secondary" type="button" data-folder="video" value="Video">
        </div>  
        <label id="resp"></label>
    </form>
    </div>
    <script>
      // 统一绑定按钮点击事件
      document.querySelectorAll('[data-folder]').forEach(btn => {
        btn.addEventListener('click', function() {
          const form = document.getElementById('uploadForm');
          const folderType = this.dataset.folder;
          // 传递表单和文件夹类型
          google.script.run
            .withSuccessHandler(msg => document.getElementById('resp').innerHTML = msg)
            .withFailureHandler(err => document.getElementById('resp').innerHTML = `上传失败: ${err.message}`)
            .uploadToDrive(form, folderType);
        });
      });
    </script>
  </body>
</html>

修改后的后端代码（Code.gs） #

function doGet() {
  var html = HtmlService.createHtmlOutputFromFile('index');
  return html.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

// 统一上传函数，根据文件夹类型选择目标文件夹
function uploadToDrive(form, folderType) {
  const file = form.myFile;
  if (!file) throw new Error('请选择要上传的文件');

  // 定义各类型对应的文件夹ID
  const folderIds = {
    file: '16LJlwalGaAvPde2JryBVbGqrsCZl2DaA',
    photo: '1xESqXwz4SxFKcpXXX3CbjfEnNXeU4ktJ',
    video: '1_HQvjpX1tfHt7FS-2Se8lPkLtBQ7WG4n'
  };

  const targetFolder = DriveApp.getFolderById(folderIds[folderType]);
  const uploadedFile = targetFolder.createFile(file);
  
  // 根据类型返回对应成功提示
  const successMessages = {
    file: '文件上传成功',
    photo: '图片上传成功',
    video: '视频上传成功'
  };
  return successMessages[folderType] + `: <a href="${uploadedFile.getUrl()}" target="_blank">查看文件</a>`;
}

修复说明 #

1. 统一事件处理：用data-folder属性标记按钮类型，统一绑定点击事件，避免重复代码。
2. 正确传递文件：直接传递表单对象给后端，后端可通过form.myFile获取用户选择的文件。
3. 合并上传逻辑：后端用一个函数处理所有上传请求，通过参数区分目标文件夹，减少冗余代码。
4. 添加错误处理：增加withFailureHandler捕获上传过程中的错误，便于排查问题。
5. 修复拼写错误：修正mulitple为multiple，支持多选文件。

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