【发布时间】：2020-10-01 00:17:33
【问题描述】：
所以我正在尝试将从 React 中的表单输入的数据发送到电子邮件地址。
一切正常，除了我尝试上传文件并且它只将路径文件的文本发送到电子邮件。
例如，电子邮件将如下所示：
来自：测试
电子邮件：testing@gmail.com
消息：测试
文件：C:\fakepath\2020-06-10 18-49-37.mp4
我显然不希望文本显示在电子邮件上，而是要上传一个文件。
关于如何完成这项工作的任何想法。
我将在下面发布大量代码供大家查看。
提前致谢！
Form.jsx
import React from 'react'
import Axios from 'axios'
class Form extends React.Component {
constructor(props) {
super(props);
super(props);
this.state = {
name: '',
email: '',
message: '',
file: null,
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState(
{
[event.target.name]: event.target.value,
[event.target.email]: event.target.value,
[event.target.message]: event.target.value,
[event.target.file]: event.target.file,
}
);
}
this.setState({
[name]: value
})
}
handleSubmit(event) {
console.log(this.state)
event.preventDefault();
const data = {
name: this.state.name,
email: this.state.email,
message: this.state.message,
file: this.state.file,
};
Axios.post("api/v1/sendMail", data)
{
alert("Thank you! We will be in touch shortly!")
}
}
render() {
return (
<React.Fragment>
<div className="formContainer centerImg" id="formScale">
<form onSubmit={this.handleSubmit} method="post">
<div className='contact'>
<h2 className="formTitles">YOUR FULL NAME</h2>
<input
name='name'
value={this.state.name}
onChange={this.handleChange}
required />
<h2 className="formTitles">EMAIL ADDRESS</h2>
<input
name='email'
value={this.state.email}
onChange={this.handleChange}
required />
<h2 className="formTitles">UPLOAD FILE</h2>
<input
type='file'
name='file'
value={this.state.file}
onChange={this.handleChange} />
<div id='messageForm'>
<h2 className="formTitles">MESSAGE</h2>
<textarea
name='message'
value={this.state.message}
onChange={this.handleChange}
required />
</div>
<div id='submit-btn'>
<input type='submit' value='SUBMIT' />
</div>
</div>
</form>
</div>
</React.Fragment>
)
}
}
export default Form
（服务器）index.js
const server = require('./server')
const bodyParser = require("body-parser");
const cookieParser = require("cookie-parser");
server.use(bodyParser.urlencoded({ extended: true }));
server.use(bodyParser.json());
server.use(cookieParser());
const { sendEmail } = require("../server/routes/mail");
server.post("/api/v1/sendMail", (req, res) => {
sendEmail(req.body.name, req.body.email, req.body.message, req.body.file);
});
const port = 3000
server.listen(port, () => {
// eslint-disable-next-line no-console
console.log('Server listening on port', port)
})
mail.js
const mailer = require("nodemailer");
const getEmailData = (name, email, message, file) => {
let data = null;
data = {
from: "Contact Form",
to: "(*correct e-mail here*)",
subject: `Message from the contact form!`,
html: `<b>From:</b> ${name}
<br><br><b>Email:</b> ${email}
<br><br><b>Message:</b> ${message}
<br><br><b>File:</b> ${file}`
}
return data;
}
const sendEmail = (name, email, message, file) => {
const smtpTransport = mailer.createTransport({
service: "Gmail",
auth: {
user: "(correct e-mail here)",
pass: "(correct password here)"
}
})
const mail = getEmailData(name, email, message, file)
smtpTransport.sendMail(mail, function(error, response) {
if(error) {
console.log(error)
} else {
alert( "Thank you! We will be in touch shortly!")
}
smtpTransport.close();
})
}
module.exports = { sendEmail }
【问题讨论】：
标签： javascript node.js reactjs forms file-upload