Vodnik za pošiljanje e-pošte s prilogami v React

Zaledni skript za pošiljanje e-pošte s prilogo z možnostjo ponovnega pošiljanja

Zaledni skript v Next.js s ponovnim pošiljanjem

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;

Komponenta sprednjega dela za kontaktni obrazec s priponko datoteke

Frontend komponenta v React.js

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;

Pogosta vprašanja in odgovori o pošiljanju e-poštnih sporočil s prilogami v React

1. Kakšen je namen uporabe FileReader pri nalaganju datotek?
2. The FileReader API se uporablja za asinhrono branje vsebine datotek in njihovo kodiranje kot niz base64 za prenos v zahtevah HTTP.
3. Kako lahko zagotovim, da so moje naložene datoteke varne?
4. Prepričajte se, da so sprejete samo določene vrste datotek z uporabo accept atribut v vnosno polje. Poleg tega preverite vsebino datoteke na strani strežnika.
5. Kakšen je pomen onload dogodek v FileReader?
6. The onload dogodek se sproži, ko je operacija branja datoteke končana, kar vam omogoča dostop do vsebine datoteke in izvajanje nadaljnjih dejanj.
7. Kako lahko ravnam z velikimi datotekami v Reactu?
8. Za velike datoteke razmislite o izvajanju nalaganja datotek v kosih, da se izognete omejitvam pomnilnika brskalnika in uporabniku zagotovite povratne informacije o napredku.
9. Zakaj moram uporabljati JSON.stringify pri pošiljanju podatkov datoteke?
10. JSON.stringify pretvori objekt JavaScript, ki vsebuje podatke datoteke, v niz JSON, ki je zahtevana oblika za telo zahteve v klicih API-ja.
11. Kaj pomeni 500 (notranja napaka strežnika) pri pošiljanju e-pošte?
12. Napaka 500 običajno označuje težavo na strani strežnika, kot je nepravilna konfiguracija končne točke API-ja ali težave v storitvi pošiljanja e-pošte.
13. Kako lahko odpravim napako 500 v klicih API-ja?
14. Preverite dnevnike strežnika za podrobna sporočila o napakah in zagotovite, da sta končna točka API in koristni tovor zahteve pravilno konfigurirana.
15. Kakšno vlogo ima res.setHeader predvajanje metode v zalednem skriptu?
16. The res.setHeader metoda se uporablja za nastavitev glave odgovora HTTP, pri čemer se določijo dovoljene metode HTTP (npr. 'POST').
17. Kako lahko med nalaganjem datotek zagotovim povratne informacije uporabnikov?
18. Uporabite opozorilna sporočila, vrstice napredka ali indikatorje stanja, da uporabnike obvestite o statusu nalaganja in morebitnih napakah.
19. Ali lahko s to nastavitvijo naložim več datotek hkrati?
20. Ta nastavitev obravnava nalaganje posamezne datoteke. Za več datotek morate spremeniti kodo za obdelavo nizov podatkov o datotekah in jih poslati v zahtevi API.

Končne misli o kontaktnih obrazcih React

Implementacija datotečnih prilog v kontaktnem obrazcu React z uporabo Resend vključuje tako sprednje kot zadnje konfiguracije. Sprednji del obravnava izbiro datotek, branje in kodiranje v base64, medtem ko zadnji del upravlja pošiljanje e-pošte s prilogo z API-jem Resend. Ustrezno obravnavanje napak in mehanizmi povratnih informacij uporabnikov so ključnega pomena za brezhibno uporabniško izkušnjo. Če upoštevate najboljše prakse in zagotovite, da so vse konfiguracije pravilne, se lahko izognete pogostim pastem, kot so napake strežnika.