使用AJAX和Google Apps Script上传文件至Google Drive生成空文件问题排查

嘿，我来帮你搞定这个头疼的问题！你遇到的情况——文件名、类型都能正常显示，但Google Drive里的文件只有8字节，这几乎可以肯定是表单没有正确配置文件上传的核心属性，和编码的关系其实不大，咱先从最基础的点入手排查：

1. 表单必须添加enctype="multipart/form-data"属性 #

默认的表单编码格式是application/x-www-form-urlencoded，这种格式只适合传输文本数据，完全没法处理二进制文件。你现在看到的8字节文件，大概率只是传递了文件名的字符串内容，根本没把文件的二进制数据发出去。

必须给表单加上这个属性，才能让浏览器正确打包文件数据：

<form id="my-form" enctype="multipart/form-data" method="POST">
  <label for="file" class="input input-file">
    <div class="button">选择文件</div>
    <!-- 注意：你原来的代码里漏了关键的文件输入框！ -->
    <input type="file" id="file" name="file">
  </label>
  <!-- 别忘了加提交按钮触发上传 -->
  <button type="submit">上传到Drive</button>
</form>

另外，你的原代码里label标签内只有按钮，没有实际的<input type="file">元素——这可是上传文件的核心控件，没有它的话，表单根本没法获取到用户选择的文件数据！

2. 后端要正确读取文件的Blob数据 #

假设你用的是Google Apps Script来处理上传请求（毕竟是存到Google Drive），千万别犯只读取参数文本值的错误，必须获取文件的Blob对象：

function doPost(e) {
  // ❌ 错误：这样只能拿到文件名，不是文件数据
  // const wrongFile = e.parameter.file;

  // ✅ 正确：从e.files里获取上传的文件Blob
  const uploadedFile = e.files[0];
  if (uploadedFile) {
    // 直接用Blob创建Drive文件
    DriveApp.createFile(uploadedFile);
    return ContentService.createTextOutput("文件上传成功！");
  }
  return ContentService.createTextOutput("未检测到上传的文件");
}

3. 用AJAX上传时要正确使用FormData #

如果是通过JS异步上传，一定要用表单实例直接初始化FormData，不要手动拼接数据，否则会丢失二进制信息：

document.getElementById('my-form').addEventListener('submit', function(e) {
  e.preventDefault();
  // 直接用当前表单实例初始化FormData，自动包含所有表单数据（包括文件）
  const formData = new FormData(this);
  
  fetch('你的Google Apps Script部署URL', {
    method: 'POST',
    body: formData,
    // 不要设置Content-Type，浏览器会自动添加正确的multipart头
    // headers: {'Content-Type': 'multipart/form-data'} ❌ 这会导致边界符丢失
  })
  .then(res => res.text())
  .then(message => console.log(message))
  .catch(err => console.error('上传失败:', err));
});

总结一下：先补全表单的enctype属性和缺失的文件输入框，再检查后端是否正确读取Blob数据，这两个点是导致文件数据丢失的最常见原因。调整后再测试，应该就能正常上传完整的文件了！

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