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

Aizmugursistēmas skripts e-pasta sūtīšanai ar pielikumu, izmantojot funkciju Sūtīt atkārtoti

Aizmugursistēmas skripts failā Next.js ar atkārtotu sūtīšanu

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;

Priekšgala komponents saziņas veidlapai ar faila pielikumu

React.js priekšgala komponents

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;

Bieži uzdotie jautājumi un atbildes par e-pasta ziņojumu sūtīšanu ar pielikumiem programmā React

1. Kāds ir lietošanas mērķis FileReader failu augšupielādēs?
2. The FileReader 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 accept atribūts ievades laukā. Turklāt servera pusē pārbaudiet faila saturu.
5. Kāda nozīme ir onload pasākums iekšā FileReader?
6. The onload 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 JSON.stringify sūtot faila datus?
10. JSON.stringify 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 res.setHeader metodes atskaņošana aizmugursistēmas skriptā?
16. The res.setHeader 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ā.

Pēdējās domas par React kontaktu veidlapām

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.