如何使用Nodemailer通过电子邮件表单发送图像附件？

问题描述

我是编码后端东西的新手。我要做的是让客户填写电子邮件表格，上传带有预览的附件，并将所述图像作为附件发送到我的电子邮件中，以便我可以设置要用于网站的图像。一切都在React和Node.js中设置。我可以发送电子邮件表格；我什至可以通过电子邮件发送附件。问题是附件为空。我尝试在新选项卡中打开附件，但该附件挂起并且不执行任何操作。如果我尝试下载附件，附件会挂起，然后显示服务器错误。

我一直在搜寻互联网，几天来尝试了很多各种各样的事情，试图使这件事起作用。看教程，查看其他问题和建议，浏览博客文章，似乎没有任何效果。我知道有办法做到这一点，但我不知道该怎么办。我还没有发现任何有效的方法。能否请别人启发我做错了什么以及如何实际发送图像附件？我将代码留在这里，以便人们查看。谢谢。

前端

import React,{ Component } from "react";
import axios from "axios";

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: "",email: "",message: "",file: null,};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleFileChange = this.handleFileChange.bind(this);
    this.handleReset = this.handleReset.bind(this);
  }

  handleChange = (e) => {
    this.setState({ [e.target.name]: e.target.value });
  };

  handleFileChange = (e) => {
    const [file] = e.target.files;
    if (file) {
      this.setState({
        file: URL.createObjectURL(e.target.files[0]),});
      console.log(file);
    }
  };

  handleReset = (e) => {
    this.setState({
      [e.target.name]: "",[e.target.email]: "",[e.target.message]: "",[e.target.file]: null,});
  };

  async handleSubmit(e) {
    e.preventDefault();

    const { name,email,message,file } = this.state;

    const form = await axios.post("/api/form",{
      name,file,});

    if (file) {
      this.setState({
        file: URL.revokeObjectURL(e.target.files[0]),});
    }
  }

  render() {
    return (
      <form
        onSubmit={this.handleSubmit}
        style={{ width: "200px",padding: "20px" }}
      >
        <label htmlFor="name">Name:</label>
        <input type="text" name="name" onChange={this.handleChange} />

        <label htmlFor="email">Email:</label>
        <input type="email" name="email" onChange={this.handleChange} />

        <label htmlFor="message">Message:</label>
        <input type="textarea" name="message" onChange={this.handleChange} />

        <label htmlFor="file">File:</label>
        <input
          type="file"
          name="file"
          accept="image/jpeg,jpg"
          onChange={this.handleFileChange}
          multiple={false}
        />

        <img src={this.state.file} alt="img" />

        <input type="submit" />
      </form>
    );
  }
}

export default App;

BACKEND

const express = require("express");
const bodyParser = require("body-parser");
const nodemailer = require("nodemailer");
const app = express();
const cors = require("cors");
const fs = require("fs");

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cors());

app.post("/api/form",(req,res) => {
  nodemailer.createTestAccount((err,account) => {
    const htmlEmail = `
      <h3>Contact Details</h3>
      <ul>
        <li>
          Name: ${req.body.name}
        </li>
        <li>
          Email: ${req.body.email}
        </li>     
      </ul>
      <h3>Message</h3>
      <p>${req.body.message}</p>
    `;

    let transporter = nodemailer.createTransport({
      host: "********",port: ***,auth: {
        user: "********",pass: "********",},});

    let mailOptions = {
      from: "[e-mail]",to: "[e-mail]",replyTo: "[e-mail]",subject: "Test Message",text: req.body.message,html: htmlEmail,attachments: [
        {
          filename: "Advertimage.jpg",content: req.body.file,contentType: "image/jpg",],};

    transporter.sendMail(mailOptions,(err,info) => {
      if (err) {
        return console.log(err);
      }

      console.log("Message sent: %s",info.message);
      console.log("Message URL: %s",nodemailer.getTestMessageUrl(info));
    });
  });
});

const PORT = process.env.PORT || 3001;

app.listen(PORT,() => {
  console.log(`Server listening on port ${PORT}`);
});

谢谢！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）