Panduan untuk Menghantar E-mel dengan Lampiran dalam React

Skrip Bahagian Belakang untuk Menghantar E-mel dengan Lampiran menggunakan Hantar Semula

Skrip belakang dalam Next.js dengan Hantar Semula

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;

Komponen Bahagian Hadapan untuk Borang Hubungan dengan Lampiran Fail

Komponen bahagian hadapan dalam 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;

Soalan dan Jawapan Biasa tentang Menghantar E-mel dengan Lampiran dalam React

1. Apakah tujuan menggunakan FileReader dalam muat naik fail?
2. The FileReader API digunakan untuk membaca kandungan fail secara tak segerak dan mengekodnya sebagai rentetan base64 untuk penghantaran dalam permintaan HTTP.
3. Bagaimanakah saya boleh memastikan muat naik fail saya selamat?
4. Pastikan hanya jenis fail tertentu sahaja diterima dengan menggunakan accept atribut dalam medan input. Selain itu, sahkan kandungan fail pada bahagian pelayan.
5. Apakah kepentingan onload acara dalam FileReader?
6. The onload peristiwa dicetuskan apabila operasi membaca fail selesai, membolehkan anda mengakses kandungan fail dan melakukan tindakan selanjutnya.
7. Bagaimanakah saya boleh mengendalikan fail besar dalam React?
8. Untuk fail besar, pertimbangkan untuk melaksanakan muat naik fail berpotongan untuk mengelakkan pengehadan memori penyemak imbas dan untuk memberikan maklum balas kemajuan kepada pengguna.
9. Kenapa saya perlu guna JSON.stringify semasa menghantar data fail?
10. JSON.stringify menukar objek JavaScript yang mengandungi data fail kepada rentetan JSON, yang merupakan format yang diperlukan untuk badan permintaan dalam panggilan API.
11. Apakah yang ditunjukkan oleh 500 (Ralat Pelayan Dalaman) semasa menghantar e-mel?
12. Ralat 500 biasanya menunjukkan isu sebelah pelayan, seperti konfigurasi titik akhir API yang salah atau isu dalam perkhidmatan penghantaran e-mel.
13. Bagaimanakah saya boleh nyahpepijat ralat 500 dalam panggilan API saya?
14. Semak log pelayan untuk mesej ralat terperinci dan pastikan titik akhir API dan muatan permintaan dikonfigurasikan dengan betul.
15. Apakah peranan yang res.setHeader main kaedah dalam skrip bahagian belakang?
16. The res.setHeader kaedah digunakan untuk menetapkan pengepala respons HTTP, menyatakan kaedah HTTP yang dibenarkan (cth., 'POST').
17. Bagaimanakah saya boleh memberikan maklum balas pengguna semasa muat naik fail?
18. Gunakan mesej makluman, bar kemajuan atau penunjuk status untuk memaklumkan pengguna tentang status muat naik dan sebarang ralat yang dihadapi.
19. Bolehkah saya memuat naik berbilang fail serentak dengan persediaan ini?
20. Persediaan ini mengendalikan muat naik fail tunggal. Untuk berbilang fail, anda perlu mengubah suai kod untuk mengendalikan tatasusunan data fail dan menghantarnya dalam permintaan API.

Pemikiran Akhir tentang Borang Hubungan React

Melaksanakan lampiran fail dalam borang hubungan React menggunakan Hantar Semula melibatkan konfigurasi bahagian hadapan dan bahagian belakang. Bahagian hadapan mengendalikan pemilihan fail, membaca dan pengekodan ke base64, manakala bahagian belakang mengurus penghantaran e-mel dengan lampiran menggunakan API Hantar Semula. Pengendalian ralat yang betul dan mekanisme maklum balas pengguna adalah penting untuk pengalaman pengguna yang lancar. Mengikuti amalan terbaik dan memastikan semua konfigurasi adalah betul boleh membantu mengelakkan perangkap biasa seperti ralat pelayan.