Juhend Reactis manusega meilide saatmiseks

Taustaprogrammi skript e-kirjade saatmiseks koos manusega, kasutades uuesti saatmist

Taustaprogrammi skript rakenduses Next.js koos uuesti saatmisega

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;

Failimanusega kontaktivormi esiosa komponent

React.js'i esiosa komponent

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;

Levinud küsimused ja vastused Reactis manusega meilide saatmise kohta

1. Mis on kasutamise eesmärk FileReader failide üleslaadimisel?
2. The FileReader 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 accept atribuut sisestusväljal. Lisaks kontrollige faili sisu serveri poolel.
5. Mis tähtsus on onload sündmus sisse FileReader?
6. The onload 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 JSON.stringify failiandmete saatmisel?
10. JSON.stringify 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 res.setHeader meetodi esitamine taustaprogrammi skriptis?
16. The res.setHeader 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.

Viimased mõtted Reacti kontaktvormide kohta

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.