Javascript 如何通过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,
      email,
      message,
      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;

import React，{Component}来自“React”；
从“axios”导入axios；
类应用程序扩展组件{
构造函数（）{
超级（）；
此.state={
姓名：“，
电邮：“，
消息：“”，
文件：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；
如果（文件）{
这是我的国家({
文件：URL.createObjectURL（e.target.files[0]），
});
console.log（文件）；
}
};
handleReset=（e）=>{
这是我的国家({
[e.target.name]：“”，
[e.target.email]：“”，
[e.target.message]：“”，
[e.target.file]：空，
});
};
异步handleSubmit（e）{
e、 预防默认值（）；
const{name，email，message，file}=this.state；
const form=wait axios.post（“/api/form”{
名称
电子邮件，
消息
文件
});
如果（文件）{
这是我的国家({
文件：URL.revokeObjectURL（e.target.files[0]），
});
}
}
render（）{
返回(
姓名：
电邮：
信息：
文件：
);
}
}
导出默认应用程序；

后端

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: "test@test.com",
      to: "testReceive@test.com",
      replyTo: "test@test.com",
      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}`);
});

const express=require（“express”）；
const bodyParser=require（“body parser”）；
const nodemailer=require（“nodemailer”）；
常量app=express（）；
const cors=要求（“cors”）；
常数fs=要求（“fs”）；
use（bodyParser.json（））；
use（bodyParser.urlencoded（{extended:false}））；
应用程序使用（cors（））；
app.post（“/api/form）”，（请求、回复）=>{
nodeEmailer.createTestAccount（（错误，帐户）=>{
常量htmlEmail=`
联系方式


名称：${req.body.Name}


电子邮件：${req.body.Email}


消息
${req.body.message}

`;
让transporter=nodeEmailer.createTransport({
主持人：“*******”，
港口：**，
认证：{
用户：“*******”，
通过：“*******”，
},
});
让邮件选项={
来自：test@test.com",
至：testReceive@test.com",
答复：“test@test.com",
主题：“测试消息”，
文本：req.body.message，
html:htmlEmail，
附件:[
{
文件名：“AdvertImage.jpg”，
内容：req.body.file，
contentType:“图像/jpg”，
},
],
};
transporter.sendMail（邮件选项，（错误，信息）=>{
如果（错误）{
返回console.log（err）；
}
console.log（“发送的消息：%s”，info.Message）；
log（“消息URL:%s”，nodeEmailer.getTestMessageUrl（info））；
});
});
});
const PORT=process.env.PORT | | 3001；
应用程序侦听（端口，（）=>{
log（`Server监听端口${port}`）；
});

---

谢谢大家!

看起来您缺少处理多部分表单数据的内容。

req.body.file

是否已填充？@Matt:是的，该对象中填充了一些内容。我知道，因为如果我将

req.body.file

添加到联系人详细信息并发送电子邮件，我会得到对象的名称。我只是没有图像。是的，所以我认为你需要一些处理多部分上传的东西来获取图像数据（比如）。bodyParser只是在做基本的表单。我会看看我能用它做些什么，如果我能让它工作，我会告诉你。谢谢：3好吧，在把这个弄得一团糟了几个小时之后，我还是不能让它工作，我真的不知道我该怎么做。我试过巴士司机、formData、路由器和其他东西，但我就是不能让它工作。随着代码的当前更改，现在我的字段中没有定义jsut。有人能告诉我如何通过电子邮件发送图像附件吗？我不明白如何正确地实现代码以使其正常工作。谢谢。看起来您缺少处理多部分表单数据的内容。

req.body.file

是否已填充？@Matt:是的，该对象中填充了一些内容。我知道，因为如果我将

req.body.file

添加到联系人详细信息并发送电子邮件，我会得到对象的名称。我只是没有图像。是的，所以我认为你需要一些处理多部分上传的东西来获取图像数据（比如）。bodyParser只是在做基本的表单。我会看看我能用它做些什么，如果我能让它工作，我会告诉你。谢谢：3好吧，在把这个弄得一团糟了几个小时之后，我还是不能让它工作，我真的不知道我该怎么做。我试过巴士司机、formData、路由器和其他东西，但我就是不能让它工作。使用当前的ch