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

Lucas Simon
01:05:33 Thứ Sáu, 17 tháng 5, 2024
React.js and Next.js

Tạo biểu mẫu liên hệ với tệp đính kèm

Việc tạo biểu mẫu liên hệ trong React cho phép người dùng gửi email có tệp đính kèm có thể là một thách thức, đặc biệt là khi tích hợp các dịch vụ của bên thứ ba như Gửi lại. Đảm bảo thiết lập và xử lý chính xác việc tải tệp lên là rất quan trọng để tránh lỗi.

Hướng dẫn này sẽ hướng dẫn bạn cách thiết lập biểu mẫu liên hệ bằng React và Gửi lại, giải quyết các vấn đề phổ biến như xử lý tệp đính kèm và gỡ lỗi máy chủ. Bằng cách làm theo các bước này, bạn sẽ có thể gửi email có tệp đính kèm một cách liền mạch.

Yêu cầu Sự miêu tả
Resend.emails.send() Gửi email với các tham số được chỉ định bao gồm từ, đến, chủ đề, html và tệp đính kèm.
setHeader() Đặt tiêu đề phản hồi với các tham số được chỉ định. Được sử dụng ở đây để chỉ cho phép phương thức 'POST'.
FileReader() Đọc nội dung của một tập tin không đồng bộ. Được sử dụng ở đây để chuyển đổi tệp thành chuỗi base64.
readAsDataURL() Phương thức FileReader đọc tệp dưới dạng chuỗi được mã hóa base64.
onload() Trình xử lý sự kiện dành cho FileReader được kích hoạt khi thao tác đọc tệp hoàn tất.
split() Tách một chuỗi thành một mảng các chuỗi con. Được sử dụng ở đây để tách nội dung base64 khỏi tiền tố URL dữ liệu.
JSON.stringify() Chuyển đổi một đối tượng hoặc giá trị JavaScript thành chuỗi JSON.

Triển khai tệp đính kèm email trong biểu mẫu liên hệ React

Tập lệnh phụ trợ được tạo bằng các tuyến API Next.js và thư viện Gửi lại để gửi email có tệp đính kèm. Chức năng chính, , được sử dụng để gửi email. Hàm này có các tham số như , , subject, , Và . Các tham số bao gồm nội dung tệp và tên tệp. Tập lệnh bắt đầu bằng cách nhập các mô-đun cần thiết và khởi tạo phiên bản Gửi lại bằng khóa API được lưu trữ trong các biến môi trường. Chức năng chỉ xử lý POST yêu cầu, gửi email và trả lại ID email nếu thành công. Nếu phương pháp đó không , nó đặt tiêu đề phản hồi thành chỉ cho phép yêu cầu và trả về trạng thái 405.

Ở giao diện người dùng, thành phần React được tạo để xử lý biểu mẫu liên hệ. Thành phần này duy trì trạng thái cho nội dung tệp và tên tệp bằng cách sử dụng React cái móc. Khi một tập tin được chọn, một đối tượng đọc nội dung tệp dưới dạng chuỗi được mã hóa base64. Nội dung và tên của tệp được lưu trữ ở trạng thái của thành phần. Khi gửi biểu mẫu, hàm async sẽ gửi một yêu cầu API phụ trợ với nội dung và tên tệp được mã hóa base64. Tiêu đề yêu cầu được đặt thành application/json và phần thân yêu cầu chứa dữ liệu tệp. Nếu email được gửi thành công, một cảnh báo sẽ hiển thị; nếu không, một cảnh báo lỗi sẽ được hiển thị.

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;

Xử lý tải tệp lên trong biểu mẫu phản ứng

Khi xử lý việc tải tệp lên ở dạng React, điều cần thiết là phải đảm bảo xử lý chính xác việc đọc tệp và mã hóa dữ liệu. Sử dụng API trong JavaScript cho phép chúng ta đọc nội dung tệp không đồng bộ, chuyển đổi chúng thành chuỗi được mã hóa base64, cần thiết để gửi dữ liệu tệp qua HTTP. Chuỗi được mã hóa này có thể dễ dàng được truyền đi như một phần của nội dung yêu cầu khi thực hiện lệnh gọi API.

Việc đảm bảo rằng dữ liệu tệp được đọc và mã hóa chính xác là rất quan trọng để tránh các sự cố như hỏng dữ liệu hoặc tải lên không đầy đủ. Ngoài ra, việc xử lý các loại và kích thước tệp khác nhau một cách thích hợp có thể ngăn ngừa các lỗi không mong muốn. Xử lý lỗi thích hợp và phản hồi của người dùng, chẳng hạn như cảnh báo, cũng rất quan trọng để hướng dẫn người dùng thực hiện quy trình tải tệp lên và thông báo cho họ nếu có sự cố.

  1. Mục đích sử dụng là gì trong tập tin tải lên?
  2. Các 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 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 sự kiện ở ?
  6. Các 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 khi gửi dữ liệu tập tin?
  10. 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ì phương thức phát trong tập lệnh phụ trợ?
  16. Các đượ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.

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ủ.