Guia per enviar correus electrònics amb fitxers adjunts a React

Script de backend per enviar correu electrònic amb fitxer adjunt mitjançant Tornar a enviar

Script de backend a Next.js amb Tornar a enviar

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;

Component d'interfície per al formulari de contacte amb fitxer adjunt

Component frontal a 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;

Preguntes i respostes habituals sobre l'enviament de correus electrònics amb fitxers adjunts a React

1. Quina és la finalitat d'utilitzar FileReader a la càrrega de fitxers?
2. El FileReader L'API s'utilitza per llegir el contingut dels fitxers de manera asíncrona i codificar-los com a cadena base64 per a la transmissió en sol·licituds HTTP.
3. Com puc assegurar-me que els meus fitxers són segurs?
4. Assegureu-vos que només s'accepten tipus de fitxers específics utilitzant el accept atribut al camp d'entrada. A més, valideu el contingut del fitxer al costat del servidor.
5. Quina és la importància del onload esdeveniment en FileReader?
6. El onload L'esdeveniment s'activa quan s'ha completat l'operació de lectura del fitxer, la qual cosa us permet accedir al contingut del fitxer i realitzar més accions.
7. Com puc gestionar fitxers grans a React?
8. Per als fitxers grans, considereu la possibilitat d'implementar càrregues de fitxers fragmentats per evitar limitacions de memòria del navegador i per proporcionar informació sobre el progrés a l'usuari.
9. Per què necessito utilitzar JSON.stringify en enviar dades d'arxiu?
10. JSON.stringify converteix l'objecte JavaScript que conté les dades del fitxer en una cadena JSON, que és el format necessari per al cos de la sol·licitud a les trucades d'API.
11. Què indica un 500 (error intern del servidor) en enviar correus electrònics?
12. Un error 500 normalment indica un problema del servidor, com ara una configuració incorrecta del punt final de l'API o problemes dins del servei d'enviament de correu electrònic.
13. Com puc depurar un error 500 a les meves trucades a l'API?
14. Comproveu els registres del servidor per obtenir missatges d'error detallats i assegureu-vos que el punt final de l'API i la càrrega útil de la sol·licitud estiguin configurats correctament.
15. Quin paper té el res.setHeader mètode de reproducció a l'script de fons?
16. El res.setHeader El mètode s'utilitza per establir la capçalera de la resposta HTTP, especificant els mètodes HTTP permesos (p. ex., "POST").
17. Com puc proporcionar comentaris dels usuaris durant la càrrega de fitxers?
18. Utilitzeu missatges d'alerta, barres de progrés o indicadors d'estat per informar els usuaris de l'estat de la càrrega i dels errors trobats.
19. Puc penjar diversos fitxers alhora amb aquesta configuració?
20. Aquesta configuració gestiona les càrregues d'un sol fitxer. Per a diversos fitxers, heu de modificar el codi per gestionar matrius de dades de fitxers i enviar-los a la sol·licitud de l'API.

Consideracions finals sobre els formularis de contacte de React

La implementació de fitxers adjunts en un formulari de contacte de React mitjançant Reenviament implica configuracions tant del front-end com del back-end. El front-end gestiona la selecció de fitxers, la lectura i la codificació a base64, mentre que el back-end gestiona l'enviament del correu electrònic amb el fitxer adjunt mitjançant l'API de Resend. El tractament adequat dels errors i els mecanismes de comentaris dels usuaris són crucials per a una experiència d'usuari perfecta. Seguir les bones pràctiques i assegurar-se que totes les configuracions són correctes pot ajudar a evitar inconvenients habituals com els errors del servidor.