Hướng dẫn gửi email có tệp đính kèm trong React

Tập lệnh phụ trợ để gửi email có tệp đính kèm bằng cách gửi lại

Tập lệnh phụ trợ trong Next.js với Gửi lại

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;

Thành phần giao diện người dùng cho biểu mẫu liên hệ có tệp đính kèm

Thành phần giao diện người dùng trong 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;

Các câu hỏi và câu trả lời thường gặp về việc gửi email có tệp đính kèm trong React

1. Mục đích sử dụng là gì FileReader trong tập tin tải lên?
2. Các FileReader API được sử dụng để đọc nội dung của tệp một cách không đồng bộ và mã hóa chúng dưới dạng chuỗi base64 để truyền trong các yêu cầu HTTP.
3. Làm cách nào để đảm bảo tệp tải lên của tôi được an toàn?
4. Đảm bảo rằng chỉ những loại tệp cụ thể mới được chấp nhận bằng cách sử dụng accept thuộc tính trong trường đầu vào. Ngoài ra, hãy xác thực nội dung tệp ở phía máy chủ.
5. Tầm quan trọng của onload sự kiện ở FileReader?
6. Các onload sự kiện được kích hoạt khi thao tác đọc tệp hoàn tất, cho phép bạn truy cập nội dung của tệp và thực hiện các hành động tiếp theo.
7. Làm cách nào tôi có thể xử lý các tệp lớn trong React?
8. Đối với các tệp lớn, hãy cân nhắc triển khai tải lên tệp theo khối để tránh giới hạn bộ nhớ của trình duyệt và cung cấp phản hồi về tiến trình cho người dùng.
9. Tại sao tôi cần sử dụng JSON.stringify khi gửi dữ liệu tập tin?
10. JSON.stringify chuyển đổi đối tượng JavaScript chứa dữ liệu tệp thành chuỗi JSON, đây là định dạng bắt buộc cho nội dung yêu cầu trong lệnh gọi API.
11. Lỗi 500 (Lỗi Máy chủ Nội bộ) biểu thị điều gì khi gửi email?
12. Lỗi 500 thường chỉ ra sự cố phía máy chủ, chẳng hạn như cấu hình điểm cuối API không chính xác hoặc sự cố trong dịch vụ gửi email.
13. Làm cách nào để gỡ lỗi 500 trong lệnh gọi API của tôi?
14. Kiểm tra nhật ký máy chủ để biết thông báo lỗi chi tiết và đảm bảo rằng điểm cuối API và tải trọng yêu cầu được định cấu hình chính xác.
15. vai trò gì res.setHeader phương thức phát trong tập lệnh phụ trợ?
16. Các res.setHeader được sử dụng để đặt tiêu đề phản hồi HTTP, chỉ định các phương thức HTTP được phép (ví dụ: 'POST').
17. Làm cách nào tôi có thể cung cấp phản hồi của người dùng trong quá trình tải tệp lên?
18. Sử dụng thông báo cảnh báo, thanh tiến trình hoặc chỉ báo trạng thái để thông báo cho người dùng về trạng thái tải lên và mọi lỗi gặp phải.
19. Tôi có thể tải lên nhiều tệp cùng lúc với thiết lập này không?
20. Thiết lập này xử lý tải lên tập tin duy nhất. Đối với nhiều tệp, bạn cần sửa đổi mã để xử lý mảng dữ liệu tệp và gửi chúng trong yêu cầu API.

Suy nghĩ cuối cùng về biểu mẫu liên hệ phản ứng

Việc triển khai tệp đính kèm trong biểu mẫu liên hệ React bằng cách sử dụng Gửi lại bao gồm cả cấu hình mặt trước và mặt sau. Giao diện người dùng xử lý việc lựa chọn, đọc và mã hóa tệp thành base64, trong khi giao diện phụ trợ quản lý việc gửi email có tệp đính kèm bằng API của Gửi lại. Cơ chế xử lý lỗi và phản hồi của người dùng thích hợp là rất quan trọng để mang lại trải nghiệm người dùng liền mạch. Thực hiện theo các phương pháp hay nhất và đảm bảo tất cả cấu hình đều chính xác có thể giúp tránh các lỗi phổ biến như lỗi máy chủ.