Panduan untuk Menghantar E-mel dengan Lampiran dalam React

Mencipta Borang Hubungan dengan Lampiran Fail

Membuat borang hubungan dalam React yang membolehkan pengguna menghantar e-mel dengan lampiran fail boleh menjadi mencabar, terutamanya apabila menyepadukan perkhidmatan pihak ketiga seperti Hantar Semula. Memastikan persediaan dan pengendalian muat naik fail yang betul adalah penting untuk mengelakkan ralat.

Panduan ini akan membimbing anda melalui penyediaan borang hubungan menggunakan React dan Hantar Semula, menangani isu biasa seperti pengendalian lampiran fail dan ralat pelayan penyahpepijatan. Dengan mengikuti langkah ini, anda akan dapat menghantar e-mel dengan lampiran dengan lancar.

Perintah	Penerangan
Resend.emails.send()	Menghantar e-mel dengan parameter tertentu termasuk daripada, kepada, subjek, html dan lampiran.
setHeader()	Menetapkan pengepala respons dengan parameter yang ditentukan. Digunakan di sini untuk membenarkan kaedah 'POST' sahaja.
FileReader()	Membaca kandungan fail secara tidak segerak. Digunakan di sini untuk menukar fail kepada rentetan base64.
readAsDataURL()	Kaedah FileReader untuk membaca fail sebagai rentetan yang dikodkan base64.
onload()	Pengendali acara untuk FileReader yang akan dicetuskan apabila operasi membaca fail selesai.
split()	Membahagikan rentetan kepada tatasusunan subrentetan. Digunakan di sini untuk memisahkan kandungan base64 daripada awalan URL data.
JSON.stringify()	Menukar objek atau nilai JavaScript kepada rentetan JSON.

Melaksanakan Lampiran E-mel dalam Borang Hubungan React

Skrip bahagian belakang dibuat menggunakan laluan API Next.js dan pustaka Hantar Semula untuk menghantar e-mel dengan lampiran. Fungsi utama, , digunakan untuk menghantar e-mel. Fungsi ini mengambil parameter seperti , , subject, , dan . The parameter termasuk kandungan fail dan nama fail. Skrip bermula dengan mengimport modul yang diperlukan dan memulakan contoh Hantar Semula menggunakan kunci API yang disimpan dalam pembolehubah persekitaran. Fungsi mengendalikan sahaja POST permintaan, menghantar e-mel dan mengembalikan ID e-mel apabila berjaya. Jika kaedahnya tidak , ia menetapkan pengepala respons untuk membenarkan sahaja meminta dan mengembalikan status 405.

Pada bahagian hadapan, komponen React dicipta untuk mengendalikan borang hubungan. Komponen mengekalkan keadaan untuk kandungan fail dan nama fail menggunakan React's cangkuk. Apabila fail dipilih, a objek membaca kandungan fail sebagai rentetan yang dikodkan base64. Kandungan dan nama fail disimpan dalam keadaan komponen. Pada penyerahan borang, fungsi async menghantar a minta kepada API bahagian belakang dengan kandungan dan nama fail yang dikodkan base64. Tajuk permintaan ditetapkan kepada application/json dan badan permintaan mengandungi data fail. Jika e-mel berjaya dihantar, amaran ditunjukkan; jika tidak, amaran ralat dipaparkan.

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;

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;

Mengendalikan Muat Naik Fail dalam Borang React

Apabila berurusan dengan muat naik fail dalam borang React, adalah penting untuk memastikan pengendalian bacaan fail dan pengekodan data yang betul. Menggunakan API dalam JavaScript membolehkan kami membaca kandungan fail secara tidak segerak, menukarkannya kepada rentetan berkod base64, yang diperlukan untuk menghantar data fail melalui HTTP. Rentetan yang dikodkan ini boleh dihantar dengan mudah sebagai sebahagian daripada badan permintaan apabila membuat panggilan API.

Memastikan bahawa data fail dibaca dan dikodkan dengan betul adalah penting untuk mengelakkan isu seperti rasuah data atau muat naik yang tidak lengkap. Selain itu, pengendalian pelbagai jenis dan saiz fail dengan sewajarnya boleh mengelakkan ralat yang tidak dijangka. Pengendalian ralat yang betul dan maklum balas pengguna, seperti makluman, juga penting untuk membimbing pengguna melalui proses muat naik fail dan untuk memaklumkan mereka jika berlaku kesilapan.

1. Apakah tujuan menggunakan dalam muat naik fail?
2. The 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 atribut dalam medan input. Selain itu, sahkan kandungan fail pada bahagian pelayan.
5. Apakah kepentingan acara dalam ?
6. The 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 semasa menghantar data fail?
10. 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 main kaedah dalam skrip bahagian belakang?
16. The 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.

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.