Juhend Reactis manusega meilide saatmiseks

Kontaktivormi loomine koos failimanustega

Reactis kontaktivormi loomine, mis võimaldab kasutajatel saata e-kirju koos failimanustega, võib olla keeruline, eriti kolmandate osapoolte teenuste (nt Resend) integreerimisel. Failide üleslaadimise õige seadistuse ja haldamise tagamine on vigade vältimiseks ülioluline.

See juhend juhendab teid kontaktivormi seadistamisel React and Resend abil, käsitledes levinud probleeme, nagu failimanuste käsitlemine ja serveri vigade silumine. Järgides neid samme, saate sujuvalt saata meile koos manustega.

Käsk	Kirjeldus
Resend.emails.send()	Saadab meili määratud parameetritega, sealhulgas saatja, aadressile, teema, html ja manused.
setHeader()	Määrab vastuse päise määratud parameetritega. Siin kasutatakse ainult POST-meetodi lubamiseks.
FileReader()	Loeb faili sisu asünkroonselt. Siin kasutatakse faili teisendamiseks base64 stringiks.
readAsDataURL()	FileReaderi meetod faili lugemiseks base64 kodeeritud stringina.
onload()	FileReaderi sündmuste käitleja, mis käivitub, kui faili lugemise toiming on lõppenud.
split()	Jaotab stringi alamstringide massiiviks. Siin kasutatakse base64 sisu eraldamiseks andmete URL-i eesliitest.
JSON.stringify()	Teisendab JavaScripti objekti või väärtuse JSON-stringiks.

Meilimanuse rakendamine Reacti kontaktivormis

Taustaprogrammi skript luuakse Next.js API marsruutide ja manustega meilide saatmiseks uuesti teegi abil. Võtmefunktsioon, , kasutatakse meili saatmiseks. See funktsioon võtab selliseid parameetreid nagu , , subject, ja . The parameeter sisaldab faili sisu ja failinime. Skript alustab vajalike moodulite importimisega ja lähtestab uuesti saatmise eksemplari, kasutades keskkonnamuutujatesse salvestatud API-võtit. Funktsioon ainult käepidemed POST päringuid, e-kirja saatmist ja e-posti ID tagastamist. Kui meetod ei ole , määrab see vastuse päise ainult lubatavaks taotleb ja tagastab oleku 405.

Esiküljel luuakse kontaktivormi haldamiseks komponent React. Komponent säilitab faili sisu ja nime oleku Reacti abil konks. Kui fail on valitud, a objekt loeb faili sisu base64 kodeeritud stringina. Faili sisu ja nimi salvestatakse komponendi olekus. Vormi esitamisel saadab asünkroonimisfunktsioon a päring taustaprogrammi API-le base64 kodeeritud faili sisu ja failinimega. Taotluse päised on seatud application/json ja päringu keha sisaldab failiandmeid. Kui meili saatmine õnnestus, kuvatakse hoiatus; vastasel juhul kuvatakse veateade.

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;

Failide üleslaadimise käsitlemine Reacti vormides

Reacti vormides failide üleslaadimisega tegelemisel on oluline tagada failide lugemise ja andmete kodeerimise õige käsitlemine. Kasutades JavaScripti API võimaldab meil lugeda failide sisu asünkroonselt, teisendades need base64 kodeeritud stringiks, mis on vajalik failiandmete saatmiseks HTTP kaudu. Seda kodeeritud stringi saab API-kõnede tegemisel hõlpsasti päringu keha osana edastada.

Failiandmete korrektse lugemise ja kodeerimise tagamine on ülioluline, et vältida selliseid probleeme nagu andmete riknemine või mittetäielikud üleslaadimised. Lisaks võib erinevate failitüüpide ja -suuruste nõuetekohane käsitsemine vältida ootamatuid vigu. Õige vigade käsitlemine ja kasutaja tagasiside, näiteks hoiatused, on samuti olulised, et juhendada kasutajat faili üleslaadimise protsessis ja teavitada teda, kui midagi läheb valesti.

1. Mis on kasutamise eesmärk failide üleslaadimisel?
2. The API-t kasutatakse failide sisu asünkroonseks lugemiseks ja nende kodeerimiseks base64 stringina HTTP-päringutes edastamiseks.
3. Kuidas tagada, et mu failide üleslaadimine on turvaline?
4. Veenduge, et aktsepteeritakse ainult teatud failitüüpe, kasutades atribuut sisestusväljal. Lisaks kontrollige faili sisu serveri poolel.
5. Mis tähtsus on sündmus sisse ?
6. The sündmus käivitatakse, kui faili lugemise toiming on lõppenud, võimaldades teil pääseda juurde faili sisule ja teha edasisi toiminguid.
7. Kuidas saan Reactis suuri faile käsitleda?
8. Suurte failide puhul kaaluge tükeldatud failide üleslaadimist, et vältida brauseri mälupiiranguid ja anda kasutajale tagasisidet edenemise kohta.
9. Miks ma pean kasutama failiandmete saatmisel?
10. teisendab failiandmeid sisaldava JavaScripti objekti JSON-stringiks, mis on API-kutsete puhul päringu keha jaoks nõutav vorming.
11. Mida näitab 500 (sisemine serveri viga) e-kirjade saatmisel?
12. Tõrge 500 viitab tavaliselt serveripoolsele probleemile, näiteks valele API lõpp-punkti konfiguratsioonile või probleemidele meili saatmisteenuses.
13. Kuidas saan API-kõnedes siluda 500 viga?
14. Kontrollige serveri logidest üksikasjalikke veateateid ja veenduge, et API lõpp-punkt ja päringu kasulik koormus on õigesti konfigureeritud.
15. Millist rolli täidab meetodi esitamine taustaprogrammi skriptis?
16. The meetodit kasutatakse HTTP vastuse päise määramiseks, täpsustades lubatud HTTP-meetodid (nt 'POST').
17. Kuidas saan failide üleslaadimise ajal kasutajatele tagasisidet anda?
18. Kasutage hoiatusteateid, edenemisribasid või olekuindikaatoreid, et teavitada kasutajaid üleslaadimise olekust ja ilmnenud vigadest.
19. Kas ma saan selle seadistusega üles laadida mitu faili korraga?
20. See seadistus käsitleb üksikute failide üleslaadimist. Mitme faili puhul peate koodi muutma, et käsitleda failiandmete massiive ja saata need API päringus.

Failimanuste rakendamine Reacti kontaktivormil, kasutades uuesti saatmist, hõlmab nii esi- kui ka tagaosa konfiguratsioone. Esiosa haldab failide valimist, lugemist ja kodeerimist base64-le, samas kui tagaosa haldab meili saatmist koos manusega, kasutades uuesti saatmise API-d. Õige vigade käsitlemine ja kasutajate tagasiside mehhanismid on sujuva kasutuskogemuse jaoks üliolulised. Parimate tavade järgimine ja kõigi konfiguratsioonide õigsuse tagamine võib aidata vältida levinud lõkse, nagu serveri vead.