Οδηγός για την αποστολή μηνυμάτων ηλεκτρονικού ταχυδρομείου με συνημμένα στο React

Σενάριο Backend για αποστολή email με συνημμένο χρησιμοποιώντας Επαναποστολή

Σενάριο Backend στο Next.js με Επαναποστολή

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 στο 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;

Συνήθεις ερωτήσεις και απαντήσεις σχετικά με την αποστολή μηνυμάτων ηλεκτρονικού ταχυδρομείου με συνημμένα στο React

1. Ποιος είναι ο σκοπός της χρήσης FileReader σε ανεβάσματα αρχείων;
2. ο FileReader Το API χρησιμοποιείται για την ασύγχρονη ανάγνωση των περιεχομένων των αρχείων και την κωδικοποίησή τους ως συμβολοσειρά base64 για μετάδοση σε αιτήματα HTTP.
3. Πώς μπορώ να διασφαλίσω ότι οι μεταφορτώσεις των αρχείων μου είναι ασφαλείς;
4. Βεβαιωθείτε ότι γίνονται αποδεκτοί μόνο συγκεκριμένοι τύποι αρχείων χρησιμοποιώντας το accept χαρακτηριστικό στο πεδίο εισαγωγής. Επιπλέον, επικυρώστε το περιεχόμενο του αρχείου από την πλευρά του διακομιστή.
5. Ποια είναι η σημασία του onload εκδήλωση σε FileReader?
6. ο onload Το συμβάν ενεργοποιείται όταν ολοκληρωθεί η λειτουργία ανάγνωσης του αρχείου, επιτρέποντάς σας να αποκτήσετε πρόσβαση στα περιεχόμενα του αρχείου και να εκτελέσετε περαιτέρω ενέργειες.
7. Πώς μπορώ να χειριστώ μεγάλα αρχεία στο React;
8. Για μεγάλα αρχεία, εξετάστε το ενδεχόμενο να εφαρμόσετε μεταφορτώσεις τμηματικών αρχείων για να αποφύγετε περιορισμούς στη μνήμη του προγράμματος περιήγησης και να παρέχετε σχόλια προόδου στον χρήστη.
9. Γιατί πρέπει να χρησιμοποιήσω JSON.stringify κατά την αποστολή δεδομένων αρχείου;
10. JSON.stringify μετατρέπει το αντικείμενο JavaScript που περιέχει τα δεδομένα αρχείου σε μια συμβολοσειρά JSON, η οποία είναι η απαιτούμενη μορφή για το σώμα αιτήματος στις κλήσεις API.
11. Τι σημαίνει το 500 (Internal Server Error) κατά την αποστολή email;
12. Ένα σφάλμα 500 συνήθως υποδεικνύει ένα ζήτημα από την πλευρά του διακομιστή, όπως εσφαλμένη διαμόρφωση παραμέτρων τερματικού API ή προβλήματα στην υπηρεσία αποστολής μηνυμάτων ηλεκτρονικού ταχυδρομείου.
13. Πώς μπορώ να διορθώσω ένα σφάλμα 500 στις κλήσεις API μου;
14. Ελέγξτε τα αρχεία καταγραφής διακομιστή για λεπτομερή μηνύματα σφάλματος και βεβαιωθείτε ότι το τελικό σημείο του API και το ωφέλιμο φορτίο αιτήματος έχουν διαμορφωθεί σωστά.
15. Τι ρόλο παίζει το res.setHeader αναπαραγωγή μεθόδου στο σενάριο υποστήριξης;
16. ο res.setHeader Η μέθοδος χρησιμοποιείται για τον ορισμό της κεφαλίδας απόκρισης HTTP, προσδιορίζοντας τις επιτρεπόμενες μεθόδους HTTP (π.χ. "POST").
17. Πώς μπορώ να παρέχω σχόλια χρηστών κατά τη μεταφόρτωση αρχείων;
18. Χρησιμοποιήστε μηνύματα ειδοποίησης, γραμμές προόδου ή δείκτες κατάστασης για να ενημερώσετε τους χρήστες για την κατάσταση μεταφόρτωσης και τυχόν σφάλματα που συναντούν.
19. Μπορώ να ανεβάσω πολλά αρχεία ταυτόχρονα με αυτήν τη ρύθμιση;
20. Αυτή η ρύθμιση χειρίζεται τις μεταφορτώσεις μεμονωμένων αρχείων. Για πολλά αρχεία, πρέπει να τροποποιήσετε τον κώδικα για να χειριστείτε πίνακες δεδομένων αρχείων και να τους στείλετε στο αίτημα API.

Τελικές σκέψεις σχετικά με τις φόρμες επικοινωνίας του React

Η υλοποίηση συνημμένων αρχείων σε μια φόρμα επικοινωνίας React με χρήση της Επαναποστολής περιλαμβάνει διαμορφώσεις τόσο του front-end όσο και του back-end. Το front-end χειρίζεται την επιλογή αρχείων, την ανάγνωση και την κωδικοποίηση στο base64, ενώ το back-end διαχειρίζεται την αποστολή του email με το συνημμένο χρησιμοποιώντας το API του Resend. Ο σωστός χειρισμός σφαλμάτων και οι μηχανισμοί ανάδρασης των χρηστών είναι ζωτικής σημασίας για μια απρόσκοπτη εμπειρία χρήστη. Η τήρηση βέλτιστων πρακτικών και η διασφάλιση ότι όλες οι διαμορφώσεις είναι σωστές μπορεί να βοηθήσει στην αποφυγή κοινών παγίδων όπως σφάλματα διακομιστή.