Rokasgrāmata e-pasta ziņojumu sūtīšanai ar pielikumiem programmā React

Kontaktformas izveide ar failu pielikumiem

Saziņas veidlapas izveide programmā React, kas ļauj lietotājiem sūtīt e-pasta ziņojumus ar failu pielikumiem, var būt sarežģīts uzdevums, jo īpaši, integrējot trešo pušu pakalpojumus, piemēram, Resend. Lai izvairītos no kļūdām, ir ļoti svarīgi nodrošināt pareizu iestatīšanu un failu augšupielādes apstrādi.

Šajā rokasgrāmatā ir sniegti norādījumi par saziņas veidlapas iestatīšanu, izmantojot React and Resend, risinot tādas izplatītas problēmas kā failu pielikumu apstrāde un servera kļūdu atkļūdošana. Veicot šīs darbības, varēsiet nevainojami sūtīt e-pasta ziņojumus ar pielikumiem.

Pavēli	Apraksts
Resend.emails.send()	Nosūta e-pastu ar noteiktiem parametriem, tostarp no, uz, tēmu, html un pielikumiem.
setHeader()	Iestata atbildes galveni ar norādītajiem parametriem. Šeit tiek izmantota tikai “POST” metode.
FileReader()	Asinhroni nolasa faila saturu. Šeit tiek izmantots, lai pārvērstu failu par base64 virkni.
readAsDataURL()	FileReader metode, lai nolasītu failu kā base64 kodētu virkni.
onload()	FileReader notikumu apdarinātājs, kas tiek aktivizēts, kad faila lasīšanas darbība ir pabeigta.
split()	Sadala virkni apakšvirkņu masīvā. Šeit tiek izmantots, lai atdalītu base64 saturu no datu URL prefiksa.
JSON.stringify()	Pārvērš JavaScript objektu vai vērtību par JSON virkni.

E-pasta pielikuma ieviešana React saziņas veidlapā

Aizmugursistēmas skripts tiek izveidots, izmantojot Next.js API maršrutus un atkārtotas sūtīšanas bibliotēku, lai nosūtītu e-pastus ar pielikumiem. Galvenā funkcija, , tiek izmantots, lai nosūtītu e-pastu. Šī funkcija ņem tādus parametrus kā , , subject, , un . The parametrs ietver faila saturu un faila nosaukumu. Skripts sākas ar nepieciešamo moduļu importēšanu un inicializē atkārtotas sūtīšanas gadījumu, izmantojot API atslēgu, kas glabājas vides mainīgajos. Tikai funkcijas rokturi POST pieprasījumus, nosūtot e-pastu un atgriežot e-pasta ID, ja tas ir izdevies. Ja metode nav , tas iestata atbildes galveni tikai atļaut pieprasa un atgriež 405 statusu.

Priekšgalā tiek izveidots React komponents, lai apstrādātu saziņas veidlapu. Komponents uztur statusu faila saturam un faila nosaukumam, izmantojot React's āķis. Kad fails ir atlasīts, a objekts nolasa faila saturu kā base64 kodētu virkni. Faila saturs un nosaukums tiek saglabāts komponenta stāvoklī. Iesniedzot veidlapu, asinhronā funkcija nosūta a pieprasījums aizmugursistēmas API ar base64 kodētu faila saturu un faila nosaukumu. Pieprasījumu galvenes ir iestatītas uz application/json un pieprasījuma pamattekstā ir faila dati. Ja e-pasts ir veiksmīgi nosūtīts, tiek parādīts brīdinājums; pretējā gadījumā tiek parādīts kļūdas brīdinājums.

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;

Failu augšupielādes apstrāde reaģēšanas veidlapās

Veicot failu augšupielādi React veidlapās, ir svarīgi nodrošināt pareizu failu lasīšanas un datu kodēšanas apstrādi. Izmantojot API JavaScript ļauj mums nolasīt failu saturu asinhroni, pārvēršot tos par base64 kodētu virkni, kas nepieciešama failu datu nosūtīšanai, izmantojot HTTP. Veicot API zvanus, šo kodēto virkni var viegli pārsūtīt kā pieprasījuma pamatteksta daļu.

Lai izvairītos no tādām problēmām kā datu bojājumi vai nepilnīgas augšupielādes, ir ļoti svarīgi nodrošināt, lai faila dati tiktu pareizi nolasīti un kodēti. Turklāt, pareizi apstrādājot dažādus failu tipus un izmērus, var novērst neparedzētas kļūdas. Pareiza kļūdu apstrāde un lietotāju atsauksmes, piemēram, brīdinājumi, ir arī svarīgi, lai palīdzētu lietotājam faila augšupielādes procesā un informētu viņus, ja kaut kas noiet greizi.

1. Kāds ir lietošanas mērķis failu augšupielādēs?
2. The API tiek izmantots, lai asinhroni nolasītu failu saturu un kodētu tos kā base64 virkni pārsūtīšanai HTTP pieprasījumos.
3. Kā es varu nodrošināt manu failu augšupielādes drošību?
4. Pārliecinieties, ka tiek pieņemti tikai noteikti failu tipi, izmantojot atribūts ievades laukā. Turklāt servera pusē pārbaudiet faila saturu.
5. Kāda nozīme ir pasākums iekšā ?
6. The notikums tiek aktivizēts, kad faila lasīšanas darbība ir pabeigta, ļaujot piekļūt faila saturam un veikt turpmākās darbības.
7. Kā es varu apstrādāt lielus failus programmā React?
8. Lieliem failiem apsveriet iespēju ieviest daļēju failu augšupielādi, lai izvairītos no pārlūkprogrammas atmiņas ierobežojumiem un sniegtu lietotājam atsauksmes par progresu.
9. Kāpēc man ir jāizmanto sūtot faila datus?
10. pārvērš JavaScript objektu, kurā ir faila dati, par JSON virkni, kas ir API izsaukumos nepieciešamais pieprasījuma pamatteksta formāts.
11. Ko norāda 500 (iekšējā servera kļūda), sūtot e-pastus?
12. Kļūda 500 parasti norāda uz servera puses problēmu, piemēram, nepareizu API galapunkta konfigurāciju vai problēmām e-pasta sūtīšanas pakalpojumā.
13. Kā es varu atkļūdot 500 kļūdu manos API zvanos?
14. Pārbaudiet, vai servera žurnālos nav detalizētu kļūdu ziņojumu, un pārliecinieties, vai API galapunkts un pieprasījuma slodze ir pareizi konfigurēti.
15. Kādu lomu pilda metodes atskaņošana aizmugursistēmas skriptā?
16. The metode tiek izmantota, lai iestatītu HTTP atbildes galveni, norādot atļautās HTTP metodes (piemēram, “POST”).
17. Kā es varu sniegt lietotāju atsauksmes failu augšupielādes laikā?
18. Izmantojiet brīdinājuma ziņojumus, norises joslas vai statusa indikatorus, lai informētu lietotājus par augšupielādes statusu un visām konstatētajām kļūdām.
19. Vai ar šo iestatījumu var augšupielādēt vairākus failus vienlaikus?
20. Šī iestatīšana apstrādā viena faila augšupielādi. Vairākiem failiem ir jāmaina kods, lai apstrādātu failu datu masīvus un nosūtītu tos API pieprasījumā.

Failu pielikumu ieviešana React kontaktformā, izmantojot atkārtotu sūtīšanu, ietver gan priekšgala, gan aizmugures konfigurācijas. Priekšgals apstrādā failu atlasi, lasīšanu un kodēšanu uz base64, savukārt aizmugure pārvalda e-pasta sūtīšanu ar pielikumu, izmantojot Resend API. Pareiza kļūdu apstrāde un lietotāju atsauksmju mehānismi ir ļoti svarīgi, lai lietotāja pieredze būtu vienmērīga. Paraugprakses ievērošana un visu konfigurāciju pareizas nodrošināšana var palīdzēt izvairīties no bieži sastopamām kļūmēm, piemēram, servera kļūdām.