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

Kapcsolatfelvételi űrlap készítése fájlmellékletekkel

A React alkalmazásban olyan kapcsolatfelvételi űrlap létrehozása, amely lehetővé teszi a felhasználók számára, hogy e-maileket küldjenek fájlmellékletekkel, kihívást jelenthet, különösen harmadik féltől származó szolgáltatások, például az Újraküldés integrálásakor. A hibák elkerülése érdekében elengedhetetlen a fájlfeltöltések helyes beállításának és kezelésének biztosítása.

Ez az útmutató végigvezeti Önt egy kapcsolatfelvételi űrlap beállításán a React and Resend funkcióval, és foglalkozik az olyan gyakori problémákkal, mint a fájlmellékletek kezelése és a szerverhibák hibakeresése. Ha követi ezeket a lépéseket, zökkenőmentesen küldhet e-maileket mellékletekkel.

Parancs	Leírás
Resend.emails.send()	E-mailt küld meghatározott paraméterekkel, beleértve a feladót, a címzettet, a tárgyat, a html-t és a mellékleteket.
setHeader()	Beállítja a válaszfejlécet meghatározott paraméterekkel. Itt csak a „POST” metódus engedélyezésére szolgál.
FileReader()	Aszinkron módon olvassa be a fájl tartalmát. Itt a fájl base64 karakterláncsá konvertálására szolgál.
readAsDataURL()	A FileReader módszere a fájl base64 kódolású karakterláncként történő olvasására.
onload()	A FileReader eseménykezelője, amely akkor indul el, amikor a fájlolvasási művelet befejeződött.
split()	Egy karakterláncot részkarakterláncok tömbjére oszt fel. Itt a base64 tartalom és az adat URL előtag elválasztására szolgál.
JSON.stringify()	A JavaScript objektumot vagy értéket JSON-karakterláncsá alakítja.

E-mail melléklet megvalósítása a React kapcsolatfelvételi űrlapon

A háttérszkript a Next.js API-útvonalak és az Újraküldés könyvtár használatával jön létre a mellékletekkel ellátott e-mailek küldéséhez. A kulcs funkció, , az e-mail küldésére szolgál. Ez a funkció olyan paramétereket vesz fel, mint pl , , subject, , és . A paraméter tartalmazza a fájl tartalmát és fájlnevét. A szkript a szükséges modulok importálásával kezdődik, és a környezeti változókban tárolt API-kulcs segítségével inicializálja az Újraküldés példányt. A funkció csak kezeli POST kéréseket, az e-mail elküldését és az e-mail azonosító visszaküldését siker esetén. Ha a módszer nem , a válaszfejlécet csak engedélyezésre állítja kér és 405-ös állapotot ad vissza.

A kezelőfelületen egy React összetevő jön létre a kapcsolatfelvételi űrlap kezelésére. Az összetevő fenntartja a fájltartalom és a fájlnév állapotát a React segítségével horog. Ha egy fájlt kiválaszt, a Az objektum base64 kódolású karakterláncként olvassa be a fájl tartalmát. A fájl tartalma és neve az összetevő állapotában tárolódik. Az űrlap elküldésekor egy aszinkron függvény elküldi a kérés a háttér API-hoz a base64 kódolású fájltartalommal és fájlnévvel. A kérésfejlécek a következőre vannak állítva application/json és a kérés törzse tartalmazza a fájl adatait. Ha az e-mailt sikeresen elküldte, figyelmeztetés jelenik meg; ellenkező esetben hibajelzés jelenik meg.

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;

Fájlfeltöltések kezelése React űrlapokon

A React űrlapokon történő fájlfeltöltések kezelésekor elengedhetetlen a fájlolvasás és az adatkódolás megfelelő kezelésének biztosítása. Használni a A JavaScript API-ja lehetővé teszi számunkra, hogy a fájlok tartalmát aszinkron módon olvassuk be, átalakítva azokat base64 kódolású karakterláncra, amely szükséges a fájladatok HTTP-n keresztüli küldéséhez. Ez a kódolt karakterlánc könnyen továbbítható a kérelem törzsének részeként API-hívások indításakor.

A fájladatok helyes olvasása és kódolása kulcsfontosságú az olyan problémák elkerülése érdekében, mint az adatsérülés vagy a hiányos feltöltés. Ezenkívül a különféle fájltípusok és -méretek megfelelő kezelése megelőzheti a váratlan hibákat. A megfelelő hibakezelés és a felhasználói visszajelzések, például a riasztások is fontosak ahhoz, hogy végigvezessék a felhasználót a fájlfeltöltési folyamaton, és tájékoztassák őket, ha valami elromlik.

1. Mi a felhasználás célja fájlfeltöltésben?
2. A 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 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 esemény be ?
6. A 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 fájl adatok küldésekor?
10. á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 metódus lejátszása a háttérszkriptben?
16. A 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.

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.