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

Creació d'un formulari de contacte amb fitxers adjunts

Crear un formulari de contacte a React que permeti als usuaris enviar correus electrònics amb fitxers adjunts pot ser un repte, especialment quan s'integren serveis de tercers com Reenviar. Assegurar la configuració correcta i la gestió de les càrregues de fitxers és crucial per evitar errors.

Aquesta guia us guiarà a través de la configuració d'un formulari de contacte amb Reaccionar i tornar a enviar, abordant problemes habituals com ara la gestió dels fitxers adjunts i la depuració d'errors del servidor. Si seguiu aquests passos, podreu enviar correus electrònics amb fitxers adjunts sense problemes.

Comandament	Descripció
Resend.emails.send()	Envia un correu electrònic amb els paràmetres especificats, com ara de, a, assumpte, html i fitxers adjunts.
setHeader()	Estableix la capçalera de la resposta amb els paràmetres especificats. S'utilitza aquí per permetre només el mètode "POST".
FileReader()	Llegeix el contingut d'un fitxer de manera asíncrona. S'utilitza aquí per convertir el fitxer a una cadena base64.
readAsDataURL()	Mètode de FileReader per llegir el fitxer com una cadena codificada en base64.
onload()	Gestor d'esdeveniments per a FileReader que s'activa quan s'ha completat l'operació de lectura del fitxer.
split()	Divideix una cadena en una matriu de subcadenes. S'utilitza aquí per separar el contingut base64 del prefix de l'URL de dades.
JSON.stringify()	Converteix un objecte o valor de JavaScript en una cadena JSON.

Implementació d'un fitxer adjunt de correu electrònic al formulari de contacte de React

L'script de fons es crea mitjançant les rutes de l'API Next.js i la biblioteca Reenvia per enviar correus electrònics amb fitxers adjunts. La funció clau, , s'utilitza per enviar el correu electrònic. Aquesta funció pren paràmetres com ara , , subject, , i . El El paràmetre inclou el contingut i el nom del fitxer. L'script comença important els mòduls necessaris i inicialitza la instància de reenviament mitjançant una clau API emmagatzemada a les variables d'entorn. La funció només gestiona POST sol·licituds, enviant el correu electrònic i retornant l'identificador del correu electrònic en cas d'èxit. Si el mètode no ho és , estableix la capçalera de resposta per permetre només sol·licita i retorna un estat 405.

A la interfície, es crea un component React per gestionar el formulari de contacte. El component manté l'estat del contingut i el nom del fitxer mitjançant React ganxo. Quan es selecciona un fitxer, a L'objecte llegeix el contingut del fitxer com una cadena codificada en base64. El contingut i el nom del fitxer s'emmagatzemen a l'estat del component. En enviar el formulari, una funció asíncrona envia a sol·licitud a l'API de fons amb el contingut i el nom del fitxer codificats en base64. Les capçaleres de la sol·licitud s'estableixen a application/json i el cos de la sol·licitud conté les dades del fitxer. Si el correu electrònic s'envia correctament, es mostra una alerta; en cas contrari, es mostra una alerta d'error.

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;

Gestió de càrregues de fitxers als formularis React

Quan es tracta de càrregues de fitxers en formularis React, és essencial garantir la correcta gestió de la lectura de fitxers i la codificació de dades. Utilitzant el L'API en JavaScript ens permet llegir el contingut dels fitxers de manera asíncrona, convertint-los en una cadena codificada en base64, que és necessària per enviar dades de fitxers per HTTP. Aquesta cadena codificada es pot transmetre fàcilment com a part del cos de la sol·licitud quan es fan trucades a l'API.

Assegurar-se que les dades del fitxer es llegeixen i es codifiquen correctament és crucial per evitar problemes com la corrupció de dades o les càrregues incompletes. A més, la gestió adequada de diferents tipus i mides de fitxers pot evitar errors inesperats. El tractament adequat dels errors i els comentaris dels usuaris, com ara les alertes, també són importants per guiar l'usuari durant el procés de càrrega de fitxers i per informar-los si alguna cosa va malament.

1. Quina és la finalitat d'utilitzar a la càrrega de fitxers?
2. El 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 atribut al camp d'entrada. A més, valideu el contingut del fitxer al costat del servidor.
5. Quina és la importància del esdeveniment en ?
6. El 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 en enviar dades d'arxiu?
10. 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 mètode de reproducció a l'script de fons?
16. El 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.

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.