React에서 첨부 파일이 포함된 이메일 보내기 가이드

재전송을 사용하여 첨부 파일이 포함된 이메일을 보내는 백엔드 스크립트

재전송을 사용하는 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에서 첨부 파일이 포함된 이메일 전송에 대한 일반적인 질문과 답변

1. 사용 목적은 무엇입니까 FileReader 파일 업로드에서?
2. 그만큼 FileReader API는 파일의 내용을 비동기적으로 읽고 이를 HTTP 요청 전송을 위해 base64 문자열로 인코딩하는 데 사용됩니다.
3. 파일 업로드가 안전한지 어떻게 확인할 수 있나요?
4. 다음을 사용하여 특정 파일 형식만 허용되는지 확인하세요. accept 입력 필드의 속성입니다. 또한 서버 측에서 파일 콘텐츠의 유효성을 검사합니다.
5. 의 의미는 무엇입니까? onload 이벤트 FileReader?
6. 그만큼 onload 파일 읽기 작업이 완료되면 이벤트가 트리거되어 파일 내용에 액세스하고 추가 작업을 수행할 수 있습니다.
7. React에서 대용량 파일을 어떻게 처리하나요?
8. 대용량 파일의 경우 브라우저 메모리 제한을 방지하고 사용자에게 진행률 피드백을 제공하려면 청크 파일 업로드를 구현하는 것이 좋습니다.
9. 왜 사용해야합니까? JSON.stringify 파일 데이터를 보낼 때?
10. JSON.stringify 파일 데이터가 포함된 JavaScript 개체를 API 호출의 요청 본문에 필요한 형식인 JSON 문자열로 변환합니다.
11. 이메일을 보낼 때 500(내부 서버 오류)은 무엇을 의미합니까?
12. 500 오류는 일반적으로 잘못된 API 엔드포인트 구성이나 이메일 전송 서비스 내의 문제와 같은 서버 측 문제를 나타냅니다.
13. API 호출에서 500 오류를 어떻게 디버깅할 수 있나요?
14. 자세한 오류 메시지는 서버 로그를 확인하고 API 엔드포인트와 요청 페이로드가 올바르게 구성되었는지 확인하세요.
15. 어떤 역할을 하는가 res.setHeader 백엔드 스크립트의 메소드 플레이?
16. 그만큼 res.setHeader 메소드는 허용되는 HTTP 메소드(예: 'POST')를 지정하여 HTTP 응답 헤더를 설정하는 데 사용됩니다.
17. 파일 업로드 중에 사용자 피드백을 어떻게 제공할 수 있나요?
18. 경고 메시지, 진행률 표시줄 또는 상태 표시기를 사용하여 사용자에게 업로드 상태 및 발생한 오류를 알립니다.
19. 이 설정으로 여러 파일을 한 번에 업로드할 수 있나요?
20. 이 설정은 단일 파일 업로드를 처리합니다. 여러 파일의 경우 파일 데이터 배열을 처리하고 이를 API 요청으로 보내도록 코드를 수정해야 합니다.

React 문의 양식에 대한 최종 생각

Resend를 사용하여 React 문의 양식에 파일 첨부를 구현하려면 프런트엔드 및 백엔드 구성이 모두 필요합니다. 프런트 엔드는 파일 선택, 읽기 및 base64로 인코딩을 처리하는 반면 백엔드는 Resend의 API를 사용하여 첨부 파일이 포함된 이메일 전송을 관리합니다. 원활한 사용자 경험을 위해서는 적절한 오류 처리 및 사용자 피드백 메커니즘이 중요합니다. 모범 사례를 따르고 모든 구성이 올바른지 확인하면 서버 오류와 같은 일반적인 함정을 피하는 데 도움이 될 수 있습니다.