无法从HTML导入CSV到Google Sheets，FormData为空报错求助

前端拖拽逻辑问题 #

• 未正确捕获拖拽文件对象：拖拽事件的dataTransfer.files是FileList集合，需确保提取到有效CSV文件，且必须阻止浏览器默认打开文件的行为，否则拖拽逻辑会被中断。
• 修正示例：

const dropArea = document.getElementById('drop-area');

// 拖拽悬停时阻止默认行为
dropArea.addEventListener('dragover', (e) => {
  e.preventDefault();
});

// 处理拖拽放下事件
dropArea.addEventListener('drop', (e) => {
  e.preventDefault();
  const file = e.dataTransfer.files[0];
  // 校验文件类型
  if (file && file.type === 'text/csv') {
    const formData = new FormData();
    formData.append('csvFile', file);
    // 确认FormData已添加文件
    console.log(formData.has('csvFile')); // 应输出true
    // 发送请求到Apps Script部署URL
    fetch('你的Apps Script部署URL', {
      method: 'POST',
      body: formData
    })
    .then(res => res.text())
    .then(console.log)
    .catch(console.error);
  } else {
    console.error('请拖拽CSV格式文件');
  }
});

请求头错误导致FormData无法解析 #

• 禁止手动设置Content-Type: multipart/form-data：浏览器会自动生成包含边界标识的请求头，手动设置会破坏解析规则，导致后端无法读取FormData。

Apps Script后端解析修正 #

• 后端需通过e.postData.contents获取文件二进制内容，再转换为CSV字符串处理，同时要确保部署权限正确（允许匿名访问，若无需身份验证）。
• 修正示例：

function doPost(e) {
  try {
    // 校验是否接收到文件数据
    if (!e.postData || !e.postData.contents) {
      return ContentService.createTextOutput('未接收到有效文件');
    }
    // 解析CSV内容
    const csvBlob = Utilities.newBlob(e.postData.contents, 'text/csv');
    const csvText = csvBlob.getDataAsString();
    const csvData = Utilities.parseCsv(csvText);
    // 写入Google Sheets
    const targetSheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('目标工作表名');
    targetSheet.clearContents();
    targetSheet.getRange(1, 1, csvData.length, csvData[0].length).setValues(csvData);
    return ContentService.createTextOutput('CSV导入成功');
  } catch (err) {
    return ContentService.createTextOutput(`导入失败：${err.message}`);
  }
}

额外排查点 #

• 用console.log(file)确认拖拽获取到的File对象有效；
• 检查Apps Script部署时是否选择了“任何人，甚至匿名”的权限等级（若无需用户登录验证）；
• 确认前端页面与Apps Script部署域名无跨域限制（使用Apps Script部署的默认URL即可避免）。

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