Opas liitteitä sisältävien sähköpostien lähettämiseen Reactissa

Taustaohjelma, jonka avulla voit lähettää sähköpostin liitteenä käyttämällä uudelleenlähetystä

Backend-skripti Next.js:ssä ja lähettää uudelleen

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;

Frontend-komponentti yhteydenottolomakkeeseen liitetiedoston kanssa

React.js:n käyttöliittymäkomponentti

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;

Yleisiä kysymyksiä ja vastauksia liitteitä sisältävien sähköpostien lähettämisestä Reactissa

1. Mikä on käytön tarkoitus FileReader tiedostojen latauksissa?
2. The FileReader API:ta käytetään tiedostojen sisällön lukemiseen asynkronisesti ja koodaamaan ne base64-merkkijonoksi HTTP-pyyntöjen lähettämistä varten.
3. Kuinka voin varmistaa, että tiedostoni lataukset ovat turvallisia?
4. Varmista, että vain tietyt tiedostotyypit hyväksytään käyttämällä accept attribuutti syöttökentässä. Lisäksi tarkista tiedoston sisältö palvelinpuolella.
5. Mikä merkitys on onload tapahtuma sisään FileReader?
6. The onload tapahtuma käynnistyy, kun tiedoston lukutoiminto on valmis, jolloin voit käyttää tiedoston sisältöä ja suorittaa muita toimintoja.
7. Kuinka käsittelen suuria tiedostoja Reactissa?
8. Jos kyseessä on suurikokoinen tiedosto, harkitse lohkottujen tiedostojen lataamista välttääksesi selaimen muistin rajoitukset ja antaaksesi käyttäjälle palautetta edistymisestä.
9. Miksi minun täytyy käyttää JSON.stringify kun lähetät tiedostotietoja?
10. JSON.stringify muuntaa tiedostotiedot sisältävän JavaScript-objektin JSON-merkkijonoksi, joka on API-kutsujen pyynnön rungon vaadittu muoto.
11. Mitä 500 (sisäinen palvelinvirhe) tarkoittaa sähköpostien lähettämisessä?
12. 500-virhe tarkoittaa yleensä palvelinpuolen ongelmaa, kuten virheellistä API-päätepisteen määritystä tai ongelmia sähköpostin lähetyspalvelussa.
13. Kuinka voin korjata 500-virheen API-kutsuissani?
14. Tarkista palvelimen lokeista yksityiskohtaiset virheilmoitukset ja varmista, että API-päätepiste ja pyynnön hyötykuorma on määritetty oikein.
15. Mikä rooli on res.setHeader menetelmän toisto taustaohjelmassa?
16. The res.setHeader -menetelmää käytetään HTTP-vastausotsikon asettamiseen, mikä määrittää sallitut HTTP-menetelmät (esim. 'POST').
17. Kuinka voin antaa käyttäjäpalautetta tiedostojen latauksen aikana?
18. Käytä hälytysviestejä, edistymispalkkeja tai tilailmaisimia ilmoittaaksesi käyttäjille latauksen tilasta ja havaituista virheistä.
19. Voinko ladata useita tiedostoja kerralla tällä asetuksella?
20. Tämä asetus käsittelee yksittäisten tiedostojen lataukset. Useiden tiedostojen koodia on muokattava, jotta voit käsitellä tiedostotietoryhmiä ja lähettää ne API-pyynnössä.

Viimeiset ajatukset React-yhteyslomakkeista

Tiedostoliitteiden käyttöönotto React-yhteyslomakkeessa uudelleenlähetyksen avulla sisältää sekä käyttöliittymän että taustan määritykset. Käyttöliittymä hoitaa tiedostojen valinnan, lukemisen ja koodauksen base64:ään, kun taas taustaosa hoitaa sähköpostin lähettämisen liitteenä käyttämällä uudelleenlähetyksen API:ta. Oikea virheiden käsittely ja käyttäjäpalautemekanismit ovat ratkaisevan tärkeitä saumattoman käyttökokemuksen kannalta. Parhaiden käytäntöjen noudattaminen ja kaikkien asetusten oikeellisuuden varmistaminen voi auttaa välttämään yleisiä sudenkuoppia, kuten palvelinvirheitä.