在 React 中发送带附件的电子邮件指南

在 React 中发送带附件的电子邮件指南
在 React 中发送带附件的电子邮件指南
Lucas Simon
2024年5月16日星期四 下午11:44:30

创建带有文件附件的联系表

在 React 中创建允许用户发送带有文件附件的电子邮件的联系表单可能具有挑战性，尤其是在集成 Resend 等第三方服务时。确保正确设置和处理文件上传对于避免错误至关重要。

本指南将引导您使用 React 和 Resend 设置联系表单，解决常见问题，例如处理文件附件和调试服务器错误。通过执行这些步骤，您将能够无缝发送带有附件的电子邮件。

命令 描述
Resend.emails.send() 发送带有指定参数的电子邮件，包括发件人、收件人、主题、html 和附件。
setHeader() 使用指定参数设置响应标头。此处用于仅允许“POST”方法。
FileReader() 异步读取文件内容。此处用于将文件转换为 Base64 字符串。
readAsDataURL() FileReader 的方法将文件读取为 Base64 编码字符串。
onload() 文件读取操作完成时触发的 FileReader 事件处理程序。
split() 将字符串拆分为子字符串数组。此处用于将 base64 内容与数据 URL 前缀分开。
JSON.stringify() 将 JavaScript 对象或值转换为 JSON 字符串。

在 React 联系表单中实现电子邮件附件

后端脚本是使用 Next.js API 路由和 Resend 库创建的，用于发送带有附件的电子邮件。关键功能， Resend.emails.send()，用于发送电子邮件。该函数采用以下参数 from, to, subject, html， 和 attachments。这 attachments 参数包括文件内容和文件名。该脚本首先导入必要的模块，并使用存储在环境变量中的 API 密钥初始化 Resend 实例。该函数仅处理 POST 请求，发送电子邮件并在成功时返回电子邮件 ID。如果该方法不是 POST，它将响应标头设置为仅允许 POST 请求并返回 405 状态。

在前端，创建一个 React 组件来处理联系表单。该组件使用 React 维护文件内容和文件名的状态 useState 钩。当选择一个文件时，会出现一个 FileReader 对象将文件内容读取为 Base64 编码字符串。文件的内容和名称存储在组件的状态中。提交表单时，异步函数会发送一个 POST 使用 Base64 编码的文件内容和文件名向后端 API 请求。请求标头设置为 application/json 请求体包含文件数据。如果电子邮件发送成功，则会显示警报；否则，将显示错误警报。

使用重新发送发送带有附件的电子邮件的后端脚本

Next.js 中带有重新发送功能的后端脚本

import type { NextApiRequest, NextApiResponse } from 'next';
import { Resend } from 'resend';

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

const send = async (req: NextApiRequest, res: NextApiResponse) => {
  const { method } = req;
  const { content, filename } = req.body;

  switch (method) {
    case 'POST': {
      try {
        const { data } = await resend.emails.send({
          from: 'onboarding@resend.dev',
          to: ['XXXXXXXXXX@gmail.com'],
          subject: 'Email with attachment',
          html: '<p>See attachment</p>',
          attachments: [{
            content,
            filename,
          }],
        });
        return res.status(200).send({ data: data?.id });
      } catch (error) {
        return res.status(500).json({ error: 'Internal Server Error' });
      }
    }
    default: {
      res.setHeader('Allow', ['POST']);
      res.status(405).end(`Method ${method} Not Allowed`);
    }
  }
};

export default send;

带有文件附件的联系表单的前端组件

React.js 中的前端组件

import * as React from 'react';

const ContactForm: React.FC = () => {
  const [content, setContent] = React.useState<string | null>(null);
  const [filename, setFilename] = React.useState('');

  const onSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (content === null) {
      alert('Please select a file to upload');
      return;
    }
    const base64Content = content.split(',')[1];
    try {
      await fetch('/api/send', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ content: base64Content, filename }),
      });
      alert('Request sent');
    } catch (e) {
      alert('Something went wrong');
    }
  };

  const onAddFileAction = (e: React.ChangeEvent<HTMLInputElement>) => {
    const reader = new FileReader();
    const files = e.target.files;
    if (files && files.length > 0) {
      reader.onload = (r) => {
        if (r.target?.result) {
          setContent(r.target.result.toString());
          setFilename(files[0].name);
        }
      };
      reader.readAsDataURL(files[0]);
    }
  };

  return (
    <form onSubmit={onSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '20px', width: 200 }}> 
      <input type="file" name="file" onChange={onAddFileAction} accept="image/*" /> 
      <input type="submit" value="Send Email" /> 
    </form> 
  );
};

export default ContactForm;

在 React Forms 中处理文件上传

在处理 React 表单中的文件上传时，必须确保文件读取和数据编码的正确处理。使用 FileReader JavaScript 中的 API 允许我们异步读取文件内容，将其转换为 Base64 编码的字符串，这是通过 HTTP 发送文件数据所必需的。在进行 API 调用时，可以轻松地将此编码字符串作为请求正文的一部分进行传输。

确保正确读取和编码文件数据对于避免数据损坏或上传不完整等问题至关重要。此外，适当处理各种文件类型和大小可以防止意外错误。正确的错误处理和用户反馈（例如警报）对于指导用户完成文件上传过程并在出现问题时通知他们也很重要。

有关在 React 中发送带附件的电子邮件的常见问题和解答

  1. 使用目的是什么 FileReader 在文件上传中？
  2. 这 FileReader API用于异步读取文件内容并将其编码为base64字符串以便在HTTP请求中传输。
  3. 如何确保我的文件上传安全？
  4. 确保仅使用特定的文件类型被接受 17 号 输入字段中的属性。此外，在服务器端验证文件内容。
  5. 有何意义 onload 事件在 FileReader？
  6. 这 onload 文件读取操作完成时会触发事件，允许您访问文件的内容并执行进一步的操作。
  7. 如何在 React 中处理大文件？
  8. 对于大文件，请考虑实施分块文件上传以避免浏览器内存限制并向用户提供进度反馈。
  9. 为什么我需要使用 JSON.stringify 什么时候发送文件数据？
  10. JSON.stringify 将包含文件数据的 JavaScript 对象转换为 JSON 字符串，这是 API 调用中请求正文所需的格式。
  11. 发送电子邮件时出现 500（内部服务器错误）表示什么？
  12. 500 错误通常表示服务器端问题，例如 API 端点配置不正确或电子邮件发送服务中存在问题。
  13. 如何调试 API 调用中的 500 错误？
  14. 检查服务器日志中的详细错误消息，并确保 API 端点和请求负载配置正确。
  15. 有何作用 res.setHeader 方法在后端脚本中播放？
  16. 这 res.setHeader 方法用于设置 HTTP 响应标头，指定允许的 HTTP 方法（例如“POST”）。
  17. 如何在文件上传过程中提供用户反馈？
  18. 使用警报消息、进度条或状态指示器通知用户上传状态和遇到的任何错误。
  19. 使用此设置可以一次上传多个文件吗？
  20. 此设置处理单个文件上传。对于多个文件，您需要修改代码来处理文件数据数组并在 API 请求中发送它们。

关于 React 联系表单的最终想法

使用 Resend 在 React 联系表单中实现文件附件涉及前端和后端配置。前端处理文件选择、读取和编码为 base64，而后端则使用 Resend 的 API 管理发送带有附件的电子邮件。正确的错误处理和用户反馈机制对于无缝的用户体验至关重要。遵循最佳实践并确保所有配置正确可以帮助避免服务器错误等常见陷阱。