HTML表单对接Google Apps Script无法上传图片求助

问题根源分析 #

你的代码存在三个核心问题：

• 前端JS存在拼写错误，导致表单数据无法正确收集提交
• Apps Script中参数名不匹配，且错误地通过e.parameters获取文件（该方式无法处理multipart/form-data中的Blob）
• 缺少对multipart/form-data类型请求的正确解析逻辑

修正后的代码 #

前端JavaScript代码 #

window.addEventListener("load", function() {
     const form = document.getElementById('TestForm'); // 修正拼写错误：getElemntById → getElementById
     form.addEventListener("submit", function(e) {
          e.preventDefault();

          const data = new FormData(form); // 修正拼写错误：newFormData → new FormData

          const action = e.target.action;
          fetch(action, {
               method: 'POST',
               body: data
          })
          .then(response => {
               if (!response.ok) {
                    throw new Error(`HTTP error! Status: ${response.status}`); // 修正模板字符串引号
               }
               return response.text();
          }) // 补上缺失的then块闭合括号
          .catch(error => {
               console.error('Error during form submission:', error);
          });
     })
})

Google Apps Script代码 #

function doPost(e) {
     try {
          const pictureFolderId = "PICTURE-FOLDER-ID";
          const pictureFolder = DriveApp.getFolderById(pictureFolderId);
          uploadImage(e, pictureFolder);
          return ContentService.createTextOutput("上传成功").setMimeType(ContentService.MimeType.TEXT);
     } catch (error) {
          console.error("上传失败：", error);
          return ContentService.createTextOutput("上传失败").setMimeType(ContentService.MimeType.TEXT);
     }
}

function uploadImage(e, pictureFolder) {
     // 解析multipart/form-data的请求边界
     const boundary = e.postData.type.split("=")[1];
     const parts = e.postData.contents.split("--" + boundary);
     
     // 遍历所有表单部分，找到图片字段
     for (const part of parts) {
          if (part.includes('name="imageUpload"')) {
               // 提取文件内容：跳过头部元数据，定位到实际文件内容
               const contentStartIndex = part.indexOf("\r\n\r\n") + 4;
               const contentEndIndex = part.lastIndexOf("\r\n--");
               const fileRawContent = part.substring(contentStartIndex, contentEndIndex);
               
               // 提取文件名
               const fileNameMatch = part.match(/filename="(.*?)"/);
               const fileName = fileNameMatch ? fileNameMatch[1] : "默认图片名.png";
               
               // 将原始内容转为Blob并上传到Drive
               const imageBlob = Utilities.newBlob(Utilities.base64Decode(fileRawContent), e.postData.type, fileName);
               pictureFolder.createFile(imageBlob);
               break;
          }
     }
}

关键错误说明 #

1. 前端拼写错误：getElemntById、newFormData这类低级错误会直接导致脚本中断，无法收集表单数据发起请求；模板字符串使用双引号而非反引号会导致变量无法解析。
2. 参数名不匹配：HTML中文件输入框的name是imageUpload，但原代码用e.parameters.file[0]获取，根本取不到对应数据。
3. multipart请求处理错误：Google Apps Script的e.parameters仅能处理普通表单字段，对于multipart/form-data中的文件，它会将内容转为字符串而非Blob对象，因此必须通过解析e.postData.contents来提取文件原始内容，再转为Blob后上传。

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