You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

如何修复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;
  }
}

关键修改说明:

  1. 表单编码enctype="multipart/form-data"是文件上传的必要配置,必须放在<form>标签上,而非文件输入框。
  2. 文件处理:通过e.files获取上传的文件对象,直接作为附件传入MailApp.sendEmailattachments参数。
  3. 数据取值e.parameters返回的是数组类型(比如mailData.email是数组),所以需要通过[0]获取实际值。
  4. 表格记录:对于文件字段,仅将文件名记录到表格中(无法直接存储文件内容)。

内容的提问来源于stack exchange,提问作者wouter mirck

火山引擎 最新活动