如何在 React 中使用 Nodemailer 通过电子邮件发送图像附件？

【问题标题】：How do I send an image attachment via Email with Nodemailer in React?如何在 React 中使用 Nodemailer 通过电子邮件发送图像附件？
【发布时间】：2022-11-14 08:43:27
【问题描述】：

两年前我曾两次问过这个问题，但我仍然无法让它发挥作用。让我解释。

我希望它如何工作是这样的：

  1. 除了图像文件，用户还上传了一些信息，而不是文本文件。
  2. 我可以轻松地发送文本字段并通过电子邮件接收它们。
  3. 我无法接收图像文件。它只是显示为空白，没有文件类型或任何内容。
  4. 在代码中，当用户点击提交按钮时，它应该将所有内容转换为数据表单并将该数据上传到后端。
  5. 然而，当文本被上传和发送时，文件没有，所以很明显我在这里遗漏了一些非常基本的东西。
  6. 我真的需要将文件上传到像 HDD 这样的物理文件系统，然后在服务器端读取文件吗？如果是这样，我该怎么做？我在哪里保存开发端的文件？这在生产中是如何处理的？我一次只需要一个图像文件的数据库吗？如果我确实需要数据库或某种物理存储，这是否意味着流程将是物理上载文件，读取它，然后删除它？这不是低效吗？
  7. 我的最后一个问题可以在这里看到关于当前相同的问题，我还没有解决这个问题：Why are my attachments not sending in Node.js?
  8. 我想要的是能够看到图像，而不是电子邮件附件中的空白附件或文本文件。我需要一个 IMAGE 文件，特别是一个 jpeg 文件。我该怎么做呢？我究竟做错了什么？我应该使用什么缓冲区类型？ Nodemailer 文档没有描述如何发送图像，只有所有文本文件。为什么这行不通？两年后，我不知所措。这又是我的代码，相关行为在服务器代码的底部附近：

    前端

    import React, {Component} from "react";
import "./master.css";
import BuyHeader from "./images/buyBlocksHeader.png";
import LoginLabel from "./images/Label-Login.png";
import EmailLabel from "./images/Label-Email.png";
import ImageLabel from "./images/Label-Image.png";
import SubmitOff from "./images/Submit_Off.png";
import SubmitOn from "./images/Submit_On.png";

class Form extends Component {
    constructor() {
        super();
        this.state = {
            submitButton: SubmitOff,
            _loginName: "",
            _email: "",
            _file: undefined,
        };
    }

    baseURL = "http://localhost:8081/";

    onLoginChange(event) {
        this.setState({ _loginName: event.target.value })
    }

    onEmailChange(event) {
        this.setState({ _email: event.target.value })
    }

    onFileChange(event) {
        const file = event.target.value;
        if (file){
            this.setState({ _file: file});
        }
        console.log(file);      
    }

    SendEmail = async(e) => { 
        e.preventDefault(); 
        const formData = new FormData();
        formData.append("loginName", this.state._loginName);
        formData.append("email", this.state._email);
        formData.append("file", this.state._file);

        const response = await fetch(this.baseURL + "email", {
            method: "POST",
            mode: "cors",            
            body: formData,
        });
        const data = await response.json();
        this.resetState();
        console.log(data);        
    }

    resetState() {
        this.setState({_loginName: "", _email: "", _file: undefined});        
        this.props.handleFormState(false);
    }

    render () {
        return (
            <div>
                <img src={BuyHeader} alt={""} />
                <form onSubmit={this.SendEmail} encType="multipart/form-data">
                    <div>
                        <label htmlFor="loginName"><img src={LoginLabel} alt={""} /></label>
                        <input type="text" id="loginName" required value={this.state._loginName} onChange={this.onLoginChange.bind(this)}/>
                    </div>
                    <div>
                        <label htmlFor="email"><img src={EmailLabel} alt={""} /></label>
                        <input type="email" id="email" required value={this.state._email} onChange={this.onEmailChange.bind(this)} />
                    </div>
                    <div>
                        <label htmlFor="file"><img src={ImageLabel} alt={""} /></label>
                        <input type="file" id="file" required accept=".jpeg, .jpg" onChange={this.onFileChange.bind(this)} />
                    </div>
                    <div>
                        <button type="submit">
                            <img src={this.state.submitButton} 
                                 alt={""} 
                                 onMouseEnter={() => {
                                    this.setState({ submitButton: SubmitOn });
                                 }}
                                 onMouseOut={() => {
                                    this.setState({ submitButton: SubmitOff });
                                 }}
                            />
                        </button>
                    </div>
                </form>
            </div>
        )
    }
}

export default Form;

    服务器

    const express = require("express")
const app = express();
const multer = require("multer");
const access = require("./config.json");
const {writeFile, readFileSync} = require("fs");
const accessPath = "./config.json";
require("dotenv").config();
const request = require("request");
const cors = require("cors");
const nodemailer = require("nodemailer");
const SMTPTransport = require("nodemailer/lib/smtp-transport");
app.use(cors({
    origin: "*"
}));

app.use(express.json());

app.use((req, res, next) => {
    res.setHeader("Access-Control-Allow-Origin", "*");
    res.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    res.header('Access-Control-Allow-Credentials', true);
    next();
  });

var file = access;
var PORT = file.port;
var server = app.listen(PORT, function() {
    var port = server.address().port;

    console.log("Back end listening at localhost:", port)
});

const fileData = readFileSync(accessPath, "utf8");
const jsonData = JSON.parse(fileData);

const upload = multer({
    storage: multer.memoryStorage()
});

const directUpload = upload.fields([
    {name: "loginName"},
    {name: "email"},
    {name: "file"}
]);;

const contactEmail = nodemailer.createTransport(new SMTPTransport({
    name: "*****",
    host: "*****",
    port: ***,
    secure: true,
    auth: {
        user: process.env.EMAIL,
        pass: process.env.PASS,
    },
}));

contactEmail.verify((error) => {
    if (error) {
        console.log(error);
    } else {
        console.log("Ready to send email request!");
    }
});

var token = "";
var curToken = file.access_token;
var activeStreams = [];
var activeUser;

app.get('/', function(req, res) {
    res.sendFile(__dirname + "/public/index.html");
});

/*Run this on initialization*/ 
function ValidateToken(currentToken) {
    const options = {
        url: process.env.VALIDATE_TOKEN, 
        json: true,       
        headers: {
            "Client-ID": process.env.CLIENT_ID,
            "Authorization": 'Bearer ' + currentToken,
        }
    };
    request.get(options, (err, res, body) => {
        if (err) {            
            return console.log(err);
        }
        console.log(res.statusCode);
        if (res.statusCode !== 200) {
            jsonData["access_token"] = "";
            writeFile(accessPath, JSON.stringify(jsonData, null, 4), (error) => {
                if (error) {
                    console.log("ERROR: File could not be written.", error);
                }
                console.log("File successfully written!");
            })
            const newFileData = readFileSync(accessPath, "utf8");
            const data = JSON.parse(newFileData);
            curToken = data.access_token;
        }
    })
}
ValidateToken(curToken);

function CheckToken(currentToken) {
    if (currentToken === "") {
        const GrabToken = (url, callback) => {
            const options = {
                url: process.env.GET_TOKEN,
                json: true,
                body: {
                    client_id: process.env.CLIENT_ID,
                    client_secret: process.env.CLIENT_SECRET,
                    grant_type: "client_credentials",
                }
            };
            request.post(options, (err, res, body) => {
                if (err) {
                    return console.log(err);
                }
                console.log(body);
                callback(res);
            })
        };
        
        GrabToken(process.env.GET_TOKEN, (res) => {            
            token = res.body.access_token;            
            const newFileData = readFileSync(accessPath, "utf8");
            const data = JSON.parse(newFileData);
            data["access_token"] = token;
            writeFile(accessPath, JSON.stringify(data, null, 4), (error) => {
                if (error) {
                    console.log("ERROR: File could not be written.", error);
                }
                console.log("File successfully written!");
            })
            console.log(token);
            curToken = token;
            return curToken;
        })
    };    
    console.log(curToken);
}

setTimeout(() => {
    CheckToken(curToken)
}, 1000);

function FindStream(currentToken) {
    const options = {
        url: process.env.GET_STREAMER + file.user,
        json: true,
        headers: {
            "Client-ID": process.env.CLIENT_ID,
            "Authorization": 'Bearer ' + currentToken,
        }
    };
    request.get(options, (err, res, body) => {
        if (err) {
            return console.log(err);
        }
        activeStreams = res.body.data.map(obj=>
            obj.user_login);
        console.log(activeStreams);
    })
}
setTimeout(() => {
    FindStream(curToken)
}, 1500)
/*End initialization*/

app.post('/streams', (req, res) => {
    function ValidateToken(currentToken) {
        const options = {
            url: process.env.VALIDATE_TOKEN, 
            json: true,       
            headers: {
                "Client-ID": process.env.CLIENT_ID,
                "Authorization": 'Bearer ' + currentToken,
            }
        };
        request.get(options, (err, res, body) => {
            if (err) {            
                return console.log(err);
            }
            console.log(res.statusCode);
            if (res.statusCode !== 200) {
                jsonData["access_token"] = "";
                writeFile(accessPath, JSON.stringify(jsonData, null, 4), (error) => {
                    if (error) {
                        console.log("ERROR: File could not be written.", error);
                    }
                    console.log("File successfully written!");
                })
                const newFileData = readFileSync(accessPath, "utf8");
                const data = JSON.parse(newFileData);
                curToken = data.access_token;
            }
        })
    }
    ValidateToken(curToken);
    
    function CheckToken(currentToken) {
        if (currentToken === "") {
            const GrabToken = (url, callback) => {
                const options = {
                    url: process.env.GET_TOKEN,
                    json: true,
                    body: {
                        client_id: process.env.CLIENT_ID,
                        client_secret: process.env.CLIENT_SECRET,
                        grant_type: "client_credentials",
                    }
                };
                request.post(options, (err, res, body) => {
                    if (err) {
                        return console.log(err);
                    }
                    console.log(body);
                    callback(res);
                })
            };
            
            GrabToken(process.env.GET_TOKEN, (res) => {            
                token = res.body.access_token;            
                const newFileData = readFileSync(accessPath, "utf8");
                const data = JSON.parse(newFileData);
                data["access_token"] = token;
                writeFile(accessPath, JSON.stringify(data, null, 4), (error) => {
                    if (error) {
                        console.log("ERROR: File could not be written.", error);
                    }
                    console.log("File successfully written!");
                })
                console.log(token);
                curToken = token;
                return curToken;
            })
        };    
        console.log(curToken);
    }

    setTimeout(() => {
        CheckToken(curToken)
    }, 1000);

    function FindStream(currentToken) {
        const options = {
            url: process.env.GET_STREAMER + file.user,
            json: true,
            headers: {
                "Client-ID": process.env.CLIENT_ID,
                "Authorization": 'Bearer ' + currentToken,
            }
        };
        request.get(options, (err, res, body) => {
            if (err) {
                return console.log(err);
            }
            activeStreams = res.body.data.map(obj=>
                obj.user_login);
            console.log(activeStreams);
        })
    }
    setTimeout(() => {
        FindStream(curToken)
    }, 1500)
    res.json(activeStreams);
})

app.get('/live', function(req, res) { 
    res.send(activeUser)   
    console.log("Received signal. " + activeUser);
});

app.post('/live', (req, res) => {
    const {parcel} = req.body  
    activeUser = activeStreams.includes(parcel);
    var userStatus = JSON.stringify(activeUser);    
    res.json(userStatus);
})

app.post('/email', directUpload, (req, res ) => {
    const mailBody = {
        from: req.file.email,
        to: process.env.EMAIL,
        subject: "The Block: Purchase Blocks Request",
        html: `<p>Streamer Login Name: ${req.file.loginName}</p>
               <p>Reply Email: ${req.file.email}</p>`,
               
        attachments: [
            {
                __filename: "adImage.jpg", /*What should this be? The file name depends upon what the user uploaded*/                
                content: new Buffer.from(req.file.file, "base64"),
            }
        ]
    };
    contactEmail.sendMail(mailBody, (error) => {
        if (error) {
            res.json({ status: "ERROR" });
        } else {
            res.json({ status: "Message sent!" });
        }
    });    
})

    我感谢任何可以非常详细地解释我需要做什么、如何做、我到底做错了什么以及为什么它不起作用的人。我很想最终能够得到这个工作。谢谢！！！

【问题讨论】：

    标签： node.js reactjs express multer nodemailer


    【解决方案1】：

    尝试参考此链接来解决您的问题。这是官方 nodemailer 文档的链接，该文档显示了如何发送带有附件的电子邮件。附件的几种配置是可能的。

    Nodemailer message attachments

    【讨论】：

      猜你喜欢
      • 2017-05-16
      • 2012-10-05
      • 2021-08-14
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2013-12-01
      • 2015-05-19
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode