如何修复HTML表单上传文件在邮件中显示为文本而非附件的问题?
解决文件上传后无法作为邮件附件发送的问题
你遇到的问题核心在于两个关键错误:一是HTML表单没有正确配置文件上传的编码类型,二是Google Apps Script没有处理上传的文件内容,只拿到了文件名文本。下面分步给出修复方案:
第一步:修正HTML表单配置
文件上传必须在<form>标签上设置enctype="multipart/form-data",同时调整文件选择框的accept属性为具体的文件类型(比如简历常用的格式):
<HTML> <body> <!-- Start of form --> <div class="container"> <form id="gform" method="POST" action="https://script.google.com/macros/s/AKfycbwLZpEa2iDgug8yVh-s9qIvo0H0GK9_O0ioLjStFBdAlqjGcgw/exec" enctype="multipart/form-data"> <label for="fname">Naam & achternaam</label> <input type="text" id="name" name="Naam" placeholder="Vul hier uw naam in"> <label for="lname">Email</label> <input type="email" id="email" name="email" placeholder="Vul hier uw email in"> <label for="wnplts">Woonplaats</label> <input type="text" id="wnplts" name="woonplaats" placeholder="Voer hier uw woonplaats in"> <label for="nummer">Nummer</label> <input type="text" id="nummer" name="nummer" placeholder="Voer hier uw nummer in"> <label for="salaris">Salaris (op fulltime basis)</label> <input type="number" id="salaris" name="salaris" placeholder=""> <label for="file">Upload CV</label> <br> <input type="file" id="CV" name="CV" accept=".pdf,.doc,.docx,.txt"> <br> <br> <label for="subject">Motivatie</label> <textarea id="subject" name="Motivatie" placeholder="Schrijf hier uw motivatie" style="height:200px"></textarea> <input type="submit" value="Submit"> </form> </div> <!-- End of form --> </body> </HTML>
第二步:修改Google Apps Script代码
需要调整脚本逻辑,从e.files中获取实际的文件对象,将其作为附件添加到邮件中,同时优化表单数据的处理:
var TO_ADDRESS = "themail@gmail.com"; // 替换为你的目标邮箱 function formatMailBody(obj, hasAttachment) { var result = ""; for (var key in obj) { // 跳过文件字段,避免显示乱码文本 if (key !== "CV") { result += "<h4 style='text-transform: capitalize; margin-bottom: 0'>" + key + "</h4><div>" + obj[key][0] + "</div>"; } } // 添加附件提示 if (hasAttachment) { result += "<h4 style='text-transform: capitalize; margin-bottom: 0'>CV</h4><div>已作为附件发送</div>"; } return result; } function doPost(e) { try { Logger.log(e); record_data(e); var mailData = e.parameters; var attachments = []; // 检查并获取上传的文件 if (e.files && e.files.length > 0) { attachments.push(e.files[0]); } MailApp.sendEmail({ to: TO_ADDRESS, subject: "Contact form submitted", replyTo: mailData.email ? mailData.email[0] : "", htmlBody: formatMailBody(mailData, attachments.length > 0), attachments: attachments // 添加文件附件 }); return ContentService .createTextOutput(JSON.stringify({"result":"success", "data": JSON.stringify(e.parameters)})) .setMimeType(ContentService.MimeType.JSON); } catch(error) { Logger.log(error); return ContentService .createTextOutput(JSON.stringify({"result":"error", "error": error.toString()})) .setMimeType(ContentService.MimeType.JSON); } } /** * 记录表单数据到表格 */ function record_data(e) { Logger.log(JSON.stringify(e)); try { var doc = SpreadsheetApp.getActiveSpreadsheet(); var sheet = doc.getSheetByName('responses'); var headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0]; var nextRow = sheet.getLastRow()+1; var row = [new Date()]; for (var i = 1; i < headers.length; i++) { if(headers[i].length > 0) { // 文件字段仅记录文件名 if (headers[i] === "CV" && e.files && e.files.length > 0) { row.push(e.files[0].getName()); } else { row.push(e.parameter[headers[i]] ? e.parameter[headers[i]][0] : ""); } } } sheet.getRange(nextRow, 1, 1, row.length).setValues([row]); } catch(error) { Logger.log(error); } finally { return; } }
关键修改说明:
- 表单编码:
enctype="multipart/form-data"是文件上传的必要配置,必须放在<form>标签上,而非文件输入框。 - 文件处理:通过
e.files获取上传的文件对象,直接作为附件传入MailApp.sendEmail的attachments参数。 - 数据取值:
e.parameters返回的是数组类型(比如mailData.email是数组),所以需要通过[0]获取实际值。 - 表格记录:对于文件字段,仅将文件名记录到表格中(无法直接存储文件内容)。
内容的提问来源于stack exchange,提问作者wouter mirck




