Google Apps Script实现表单文件上传至指定Google Drive文件夹报错解决及代码优化求助

嘿，我来帮你搞定这个上传问题！你的代码出现"invalid argument listener"错误，还有上传逻辑的问题，咱们一步步修正：

一、先说说你代码里的几个坑 #

1. 拼写错误：文件输入框里的mulitple应该是multiple，这个会影响多选文件的功能；
2. 获取文件的方式错了：按钮点击事件里的this.childNode根本拿不到文件输入框，得用DOM选择器直接获取；
3. 重复定义函数：你写了三个同名的onSuccess，JS里后面的会把前面的覆盖，导致不管点哪个按钮，成功提示都会是最后一个；
4. 文件传递方式不对：要给服务器端传文件，得用FormData对象来包装，不然google.script.run没法正确接收。

二、修正后的完整代码 #

1. 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" id="submitBtn1" value="File">
<input class="btn btn-outline-secondary" type="button" id="submitBtn2" value="Foto">
<input class="btn btn-outline-secondary" type="button" id="submitBtn3" value="Video">
</div>
<label id="resp"></label>
</form>
</div>
<script>
// 提前获取常用元素，避免重复查询DOM
const fileInput = document.querySelector('input[name="myFile"]');
const respLabel = document.getElementById('resp');

// 通用的成功提示函数
function onSuccess(message) {
  respLabel.innerHTML = message;
  // 上传成功后清空文件选择，方便下次操作
  fileInput.value = '';
}

// 上传到File文件夹
document.getElementById('submitBtn1').addEventListener('click', function(){
  if (!fileInput.files.length) {
    respLabel.innerHTML = '请先选择要上传的文件哦';
    return;
  }
  // 用FormData包装文件和目标文件夹类型
  const formData = new FormData();
  formData.append('folderType', 'file');
  // 如果选了多个文件，都加进去
  for (let i = 0; i < fileInput.files.length; i++) {
    formData.append('myFile', fileInput.files[i]);
  }
  // 调用服务器端函数，成功后显示对应提示
  google.script.run.withSuccessHandler(() => onSuccess('File上传成功啦')).uploadToFolder(formData);
});

// 上传到Foto文件夹
document.getElementById('submitBtn2').addEventListener('click', function(){
  if (!fileInput.files.length) {
    respLabel.innerHTML = '请先选择要上传的图片哦';
    return;
  }
  const formData = new FormData();
  formData.append('folderType', 'foto');
  for (let i = 0; i < fileInput.files.length; i++) {
    formData.append('myFile', fileInput.files[i]);
  }
  google.script.run.withSuccessHandler(() => onSuccess('Foto上传成功啦')).uploadToFolder(formData);
});

// 上传到Video文件夹
document.getElementById('submitBtn3').addEventListener('click', function(){
  if (!fileInput.files.length) {
    respLabel.innerHTML = '请先选择要上传的视频哦';
    return;
  }
  const formData = new FormData();
  formData.append('folderType', 'video');
  for (let i = 0; i < fileInput.files.length; i++) {
    formData.append('myFile', fileInput.files[i]);
  }
  google.script.run.withSuccessHandler(() => onSuccess('Video上传成功啦')).uploadToFolder(formData);
});
</script>
</body>
</html>

2. code.gs（服务器端脚本，If Else实现版本） #

既然你想学习If Else的写法，咱们就用这种方式来判断目标文件夹：

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

function uploadToFolder(formData) {
  // 获取前端传来的文件列表
  const files = formData.myFile;
  let targetFolder;

  // 用If Else判断要上传到哪个文件夹
  if (formData.folderType === 'file') {
    targetFolder = DriveApp.getFolderById('12gKxEtiZhL0hKU6qd-ngVih1DhP_UV8_');
  } else if (formData.folderType === 'foto') {
    targetFolder = DriveApp.getFolderById('1LngD6Ziqqd2i5mt-IGX3NWzVPMIAJEWU');
  } else if (formData.folderType === 'video') {
    targetFolder = DriveApp.getFolderById('1LJgcCAn1_Kb6SVVLfxzKkmiw_hg47zoP');
  } else {
    // 如果传了无效的类型，抛出错误
    throw new Error('无效的文件夹类型，请检查前端代码');
  }

  // 遍历所有文件，上传到目标文件夹
  files.forEach(file => {
    targetFolder.createFile(file);
  });

  return true;
}

三、额外说明 #

• 我加了文件选择的校验，防止用户没选文件就点击上传，提升体验；
• 上传成功后会清空文件输入框，方便用户继续上传其他文件；
• 用FormData传递数据是Google Apps Script里上传文件的标准方式，能确保文件正确传递到服务器端；
• 如果你以后想加更多文件夹，只需要在前端按钮的点击事件里加对应的folderType，然后在服务器端的If Else里加对应的文件夹ID就行。

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