如何在 Resend 邮件 API 中正确处理文件上传并作为附件发送-js教程-PHP中文网

如何在 Resend 邮件 API 中正确处理文件上传并作为附件发送

本文详解如何将 HTML 表单中的文件转换为 Base64 字符串，并通过 JSON POST 请求安全传递给后端，最终以合法格式（string 或 Buffer）注入 Resend emails.send() 的 attachments 字段。

本文详解如何将 html 表单中的 `` 文件转换为 base64 字符串，并通过 json post 请求安全传递给后端，最终以合法格式（`string` 或 `buffer`）注入 resend `emails.send()` 的 `attachments` 字段。

在使用 Resend 发送带附件的邮件时，关键限制在于：Resend 的 attachments[].content 字段仅接受字符串（如 Base64 编码内容）或 Node.js Buffer 对象，而浏览器端的 <input type="file"> 原生返回的是 File 对象（继承自 Blob），无法直接序列化进 JSON 请求体。若错误地尝试 JSON.stringify(files) 或直接传入 File 实例，会导致空数据、类型错误或服务端校验失败（如 "content must be in string or buffer format"）。

✅ 正确做法是：在前端用 FileReader 将文件读取为 Data URL（Base64 格式），提取纯 Base64 内容，再通过标准 JSON POST 发送给后端。Data URL 形如 data:application/pdf;base64,xxxxxx...，需去除前缀保留 Base64 主体。

以下是完整实现流程：

1. 前端：读取文件并提取 Base64 内容

const [base64Content, setBase64Content] = useState<string>('');
const [filename, setFilename] = useState<string>('');

const handleFileChange = (e: React.ChangeEvent<htmlinputelement>) => {
  const file = e.target.files?.[0];
  if (!file) return;

  const reader = new FileReader();
  reader.onload = (event) => {
    const dataUrl = event.target?.result as string;
    // 提取 Base64 主体：移除 'data:*/;base64,' 前缀
    const base64String = dataUrl.split(',')[1];
    setBase64Content(base64String);
    setFilename(file.name);
  };
  reader.readAsDataURL(file); // ✅ 必须用 readAsDataURL，而非 readAsArrayBuffer（后者不生成 Base64）
};

// 表单中使用
<input type="file" accept=".pdf,.jpg,.png,.docx" onchange="{handleFileChange}"></htmlinputelement></string></string>

2. 前端：发送 JSON 请求到后端 API

const sendEmail = async () => {
  const res = await fetch('/api/send-email', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      from: 'Acme <hello>',
      to: ['user@example.com'],
      subject: 'With attachment',
      text: 'Check the attached file!',
      attachments: [{
        filename,
        content: base64Content, // ✅ 纯 Base64 字符串，可直接用于 Resend
      }]
    })
  });

  if (!res.ok) throw new Error('Failed to send email');
};</hello>

3. 后端（示例：Next.js API Route）：构造 Resend 请求

// pages/api/send-email.ts
import { NextApiRequest, NextApiResponse } from 'next';
import { Resend } from 'resend';

const resend = new Resend(process.env.RESEND_API_KEY!);

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  if (req.method !== 'POST') return res.status(405).end();

  const { from, to, subject, text, attachments } = req.body;

  try {
    const data = await resend.emails.send({
      from,
      to,
      subject,
      text,
      attachments: attachments.map((att: any) => ({
        filename: att.filename,
        content: Buffer.from(att.content, 'base64'), // ✅ 后端转为 Buffer（推荐）或保持字符串
      }))
    });
    res.status(200).json(data);
  } catch (error) {
    console.error(error);
    res.status(500).json({ error: 'Email sending failed' });
  }
}

⚠️ 重要注意事项：

不要在前端使用 FormData + fetch 直接发给 Resend：Resend 不支持 multipart/form-data，且其 SDK 要求 content 是字符串/Buffer，非 File 对象。
避免 readAsArrayBuffer + JSON.stringify：ArrayBuffer 无法直接 JSON 序列化，会变成空对象 {}。
大文件限制：Resend 单封邮件附件总大小上限为 50MB；Base64 编码会使体积膨胀约 33%，建议前端校验文件大小（file.size ）。
安全性：后端务必校验 filename（防止路径遍历）、content 是否为有效 Base64（可用正则 /^[A-Za-z0-9+/]*={0,2}$/ 初筛），并设置合理的 MIME 类型白名单。