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.
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;
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.
- Quina és la finalitat d'utilitzar a la càrrega de fitxers?
- 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.
- Com puc assegurar-me que els meus fitxers són segurs?
- 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.
- Quina és la importància del esdeveniment en ?
- 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.
- Com puc gestionar fitxers grans a React?
- 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.
- Per què necessito utilitzar en enviar dades d'arxiu?
- 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.
- Què indica un 500 (error intern del servidor) en enviar correus electrònics?
- 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.
- Com puc depurar un error 500 a les meves trucades a l'API?
- 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.
- Quin paper té el mètode de reproducció a l'script de fons?
- El El mètode s'utilitza per establir la capçalera de la resposta HTTP, especificant els mètodes HTTP permesos (p. ex., "POST").
- Com puc proporcionar comentaris dels usuaris durant la càrrega de fitxers?
- 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.
- Puc penjar diversos fitxers alhora amb aquesta configuració?
- 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.