表单提交后如何将上传文件作为附件发送至收件人邮箱

Got it, let's walk through exactly how to build this flow: from letting users upload a file via your form, to attaching that file and sending it to a recipient's email once they hit "Send". I'll use practical code examples for both frontend and a common backend stack (Node.js/Express) to make this concrete.

First, your form needs to be configured to handle file data. The enctype="multipart/form-data" attribute is non-negotiable here—it tells the browser how to encode the form data including files.

<form action="/send-email" method="POST" enctype="multipart/form-data">
  <!-- Optional: Add other form fields like recipient email, message, etc. -->
  <label for="file-upload">Select file to attach:</label>
  <input type="file" id="file-upload" name="user-file" required>
  
  <button type="submit">Send Email with Attachment</button>
</form>

We'll use three key packages here:

• express: To set up the web server and handle form submissions
• multer: To parse and store the uploaded file
• nodemailer: To send emails with attachments

Step 1: Set up dependencies #

First, initialize your project and install the packages:

npm init -y
npm install express multer nodemailer

Step 2: Configure the server and file handling #

Create a server.js file with this code:

const express = require('express');
const multer = require('multer');
const nodemailer = require('nodemailer');
const fs = require('fs');
const app = express();

// Configure multer to store uploaded files temporarily (create the ./uploads folder first!)
const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, './uploads/');
  },
  filename: (req, file, cb) => {
    cb(null, Date.now() + '-' + file.originalname); // Add timestamp to avoid filename conflicts
  }
});
const upload = multer({ storage: storage });

// Configure nodemailer email transport
const transporter = nodemailer.createTransport({
  service: 'Gmail', // Or use Outlook, SendGrid, Mailgun, etc.
  auth: {
    user: 'your-email@gmail.com',
    pass: 'your-app-password' // For Gmail, use an App Password (not your regular password)
  }
});

// Handle form submission and send email
app.post('/send-email', upload.single('user-file'), (req, res) => {
  const file = req.file; // The uploaded file object

  // Email options (customize recipient, subject, message as needed)
  const mailOptions = {
    from: 'your-email@gmail.com',
    to: 'recipient@example.com', // You can pull this from a form field too!
    subject: 'New File Attachment from Form Submission',
    text: 'Attached is the file submitted via your form.',
    attachments: [
      {
        filename: file.originalname,
        path: file.path // Path to the uploaded file on your server
      }
    ]
  };

  // Send the email
  transporter.sendMail(mailOptions, (error, info) => {
    if (error) {
      console.error(error);
      res.send('Oops! There was an error sending your email.');
    } else {
      console.log('Email sent: ' + info.response);
      res.send('Email sent successfully with your attachment!');
      // Clean up: Delete the uploaded file after sending to save server space
      fs.unlink(file.path, (err) => {
        if (err) console.error('Failed to delete uploaded file:', err);
      });
    }
  });
});

app.listen(3000, () => {
  console.log('Server running on port 3000');
});

• Email Service Setup: For Gmail, enable 2FA on your account and create an App Password (regular passwords won't work with nodemailer anymore). For production, use a transactional email service like SendGrid or Mailgun for better deliverability.
• File Storage: The example uses disk storage, but you can use multer.memoryStorage() to keep small files in memory (avoids writing to disk).
• File Limits: Add limits to multer to prevent oversized uploads: multer({ storage: storage, limits: { fileSize: 5 * 1024 * 1024 } }) (restricts to 5MB).
• Other Backends: If you're using PHP, use move_uploaded_file() to handle uploads and PHPMailer to send attachments. For Python, use Flask with flask-uploads and smtplib.

内容的提问来源于stack exchange，提问作者Saravana priyan S