Útmutató a mellékletekkel ellátott e-mailek küldéséhez a Reactban

Backend Script e-mail küldéséhez melléklettel az Újraküldés segítségével

Backend szkript a Next.js-ben az újraküldéssel

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;

Frontend komponens kapcsolatfelvételi űrlaphoz fájlmelléklettel

Frontend összetevő a React.js-ben

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;

Gyakori kérdések és válaszok a React-ban csatolt e-mailek küldésével kapcsolatban

1. Mi a felhasználás célja FileReader fájlfeltöltésben?
2. A FileReader Az API a fájlok tartalmának aszinkron olvasására és base64-es karakterláncként való kódolására szolgál a HTTP-kérésekben történő továbbításhoz.
3. Hogyan biztosíthatom, hogy fájljaim biztonságosak legyenek?
4. Győződjön meg arról, hogy csak bizonyos fájltípusok fogadhatók el a használatával accept attribútumot a beviteli mezőben. Ezenkívül ellenőrizze a fájl tartalmát a szerver oldalon.
5. Mi a jelentősége a onload esemény be FileReader?
6. A onload Az esemény akkor indul el, amikor a fájlolvasási művelet befejeződött, így hozzáférhet a fájl tartalmához és további műveleteket hajthat végre.
7. Hogyan kezelhetek nagy fájlokat a Reactban?
8. Nagy fájlok esetén fontolja meg a darabolt fájlfeltöltés megvalósítását, hogy elkerülje a böngészőmemória korlátait, és visszajelzést adjon a felhasználónak a folyamatról.
9. Miért kell használnom JSON.stringify fájl adatok küldésekor?
10. JSON.stringify átalakítja a fájladatokat tartalmazó JavaScript-objektumot JSON-karakterláncra, amely az API-hívásokban a kérés törzsének szükséges formátuma.
11. Mit jelez az 500-as (belső szerverhiba) e-mailek küldésekor?
12. Az 500-as hiba általában kiszolgálóoldali problémát jelez, például helytelen API-végpont-konfigurációt vagy az e-mail küldő szolgáltatáson belüli problémákat.
13. Hogyan tudok hibakeresni egy 500-as hibát az API-hívásaimban?
14. Ellenőrizze a kiszolgálónaplókat a részletes hibaüzenetekért, és győződjön meg arról, hogy az API-végpont és a kérés hasznos terhelése megfelelően van konfigurálva.
15. Milyen szerepet tölt be a res.setHeader metódus lejátszása a háttérszkriptben?
16. A res.setHeader metódus a HTTP válaszfejléc beállítására szolgál, megadva az engedélyezett HTTP metódusokat (pl. „POST”).
17. Hogyan adhatok felhasználói visszajelzést a fájlfeltöltés során?
18. Használjon figyelmeztető üzeneteket, folyamatjelző sávokat vagy állapotjelzőket, hogy tájékoztassa a felhasználókat a feltöltés állapotáról és az esetleges hibákról.
19. Fel tudok tölteni több fájlt egyszerre ezzel a beállítással?
20. Ez a beállítás egyetlen fájl feltöltését kezeli. Több fájl esetén módosítania kell a kódot, hogy kezelje a fájladatok tömbjét, és elküldje azokat az API-kérésben.

Utolsó gondolatok a React kapcsolatfelvételi űrlapokról

A fájlmellékletek React kapcsolatfelvételi űrlapon az Újraküldéssel történő megvalósítása előtér- és háttérkonfigurációkat is magában foglal. A front-end kezeli a fájlkiválasztást, az olvasást és a base64-be való kódolást, míg a back-end az e-mailek elküldését a melléklettel a Resend API segítségével. A megfelelő hibakezelés és a felhasználói visszajelzési mechanizmusok elengedhetetlenek a zökkenőmentes felhasználói élményhez. A bevált gyakorlatok követése és az összes konfiguráció helyességének biztosítása segíthet elkerülni az olyan gyakori buktatókat, mint a szerverhibák.