上传文件仅从React Form向电子邮件发送文本

马修·德文波特

因此,我试图将从React中的表单输入的数据发送到电子邮件地址。

一切工作正常,除了我尝试上传文件的地方,它仅将路径文件的文本发送到电子邮件。


例如,电子邮件将如下所示:

来自:测试

电子邮件:[email protected]

讯息:测试

文件: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>&nbsp;${name}
                      <br><br><b>Email:</b>&nbsp;${email}
                      <br><br><b>Message:</b>&nbsp;${message}
                      <br><br><b>File:</b>&nbsp;${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 }
马修·德文波特

JózefPodlecki为获得正确的解决方案提供了指导,这是试图获得最终解决方案的任何人的最终代码。

Form.jsx

import React from 'react'
import Axios from 'axios'

const toBase64 = file => new Promise((resolve, reject) => {
  const reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onload = () => resolve(reader.result);
  reader.onerror = error => reject(error);
});

class Form extends React.Component {
  constructor(props) {
    super(props);
    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);
  }

  handleFileChange({target: {name, files}}) {
    toBase64(files[0]).then(dataUri => {
      this.setState(state => ({...state, [name]: dataUri}))
    })
 }

  handleChange(event) {
    this.setState(
      {
        [event.target.name]: event.target.value,
        [event.target.email]: event.target.value,
        [event.target.message]: event.target.value,
      }
    );
  }

  handleSubmit(event) {
    event.preventDefault();
    const data = {...this.state};

    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.handleFileChange} />
              <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 express = require('express')

const bodyParser = require("body-parser");
const cookieParser = require("cookie-parser");

server.use(express.json({limit: '50mb'}))
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 = process.env.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!`,
            attachments: [
                {
                  path: `${file}`
                }
              ],
            html: `<b>From:</b>&nbsp;${name}
                  <br><br><b>Email:</b>&nbsp;${email}
                  <br><br><b>Message:</b>&nbsp;${message}`
            }
    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 }

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何通过运行jQuery的php文件向管理员发送电子邮件

来自分类Dev

发送文件作为电子邮件正文

来自分类Dev

通过sh,curl,mailgun发送文件内容作为电子邮件文本

来自分类Dev

通过电子邮件发送文本文件附件

来自分类Dev

文本文件的内容发送到电子邮件正文vb.net

来自分类Dev

Ruby:发送电子邮件:来自文本文件的电子邮件服务器、发件人、收件人、主题、正文

来自分类Dev

仅从电子邮件HTML正文获取文本

来自分类Dev

Laravel 5:上传图片以发送电子邮件

来自分类Dev

如何使用 Python 电子邮件模块在电子邮件中发送文件?

来自分类Dev

设置上传和通过电子邮件发送文件的路径Ruby on Rails

来自分类Dev

如何在 web2py 中附加上传的文件以发送电子邮件

来自分类Dev

上传文件或发送电子邮件时出现身份验证错误

来自分类Dev

读取HTML /文本文件,然后在WPF / C#中将其作为HTML格式的电子邮件发送

来自分类Dev

读取HTML /文本文件,然后在WPF / C#中将其作为HTML格式的电子邮件发送

来自分类Dev

发送python电子邮件时添加excel文件附件

来自分类Dev

生成文件时自动发送电子邮件

来自分类Dev

发送电子邮件后无法删除PDF文件

来自分类Dev

PHP通过电子邮件发送JSON文件

来自分类Dev

使用nodeJs发送原始电子邮件文件

来自分类Dev

如何通过电子邮件发送Excel文件?

来自分类Dev

无法通过电子邮件发送文件

来自分类Dev

使用批处理文件发送电子邮件

来自分类Dev

Java发送带有附件的文件的电子邮件

来自分类Dev

在已发送文件夹中创建电子邮件

来自分类Dev

在正文电子邮件中发送MHT文件

来自分类Dev

生成文件时自动发送电子邮件

来自分类Dev

codeigniter 多个文件归档通过电子邮件发送

来自分类Dev

PhpMailer 不发送带有 .pdf 文件的电子邮件

来自分类Dev

woocommerce 文件在哪里发送电子邮件

Related 相关文章

  1. 1

    如何通过运行jQuery的php文件向管理员发送电子邮件

  2. 2

    发送文件作为电子邮件正文

  3. 3

    通过sh,curl,mailgun发送文件内容作为电子邮件文本

  4. 4

    通过电子邮件发送文本文件附件

  5. 5

    文本文件的内容发送到电子邮件正文vb.net

  6. 6

    Ruby:发送电子邮件:来自文本文件的电子邮件服务器、发件人、收件人、主题、正文

  7. 7

    仅从电子邮件HTML正文获取文本

  8. 8

    Laravel 5:上传图片以发送电子邮件

  9. 9

    如何使用 Python 电子邮件模块在电子邮件中发送文件?

  10. 10

    设置上传和通过电子邮件发送文件的路径Ruby on Rails

  11. 11

    如何在 web2py 中附加上传的文件以发送电子邮件

  12. 12

    上传文件或发送电子邮件时出现身份验证错误

  13. 13

    读取HTML /文本文件,然后在WPF / C#中将其作为HTML格式的电子邮件发送

  14. 14

    读取HTML /文本文件,然后在WPF / C#中将其作为HTML格式的电子邮件发送

  15. 15

    发送python电子邮件时添加excel文件附件

  16. 16

    生成文件时自动发送电子邮件

  17. 17

    发送电子邮件后无法删除PDF文件

  18. 18

    PHP通过电子邮件发送JSON文件

  19. 19

    使用nodeJs发送原始电子邮件文件

  20. 20

    如何通过电子邮件发送Excel文件?

  21. 21

    无法通过电子邮件发送文件

  22. 22

    使用批处理文件发送电子邮件

  23. 23

    Java发送带有附件的文件的电子邮件

  24. 24

    在已发送文件夹中创建电子邮件

  25. 25

    在正文电子邮件中发送MHT文件

  26. 26

    生成文件时自动发送电子邮件

  27. 27

    codeigniter 多个文件归档通过电子邮件发送

  28. 28

    PhpMailer 不发送带有 .pdf 文件的电子邮件

  29. 29

    woocommerce 文件在哪里发送电子邮件

热门标签

归档