Javascript 上载文件仅从React表单向电子邮件发送文本_Javascript_Node.js_Reactjs_Forms_File Upload

Javascript 上载文件仅从React表单向电子邮件发送文本

javascript node.js reactjs forms file-upload

Javascript 上载文件仅从React表单向电子邮件发送文本,javascript,node.js,reactjs,forms,file-upload,Javascript,Node.js,Reactjs,Forms,File Upload,因此，我尝试将从表单输入的数据发送到电子邮件地址除了我尝试上传一个文件，它只将path文件的文本发送到电子邮件之外，一切都很正常例如，电子邮件将如下所示：发件人：test 电邮：testing@gmail.com 信息：测试文件：C:\fakepath\2020-06-1018-49-37.mp4 很明显，我不希望文本显示在电子邮件上，而是希望上传一个文件关于如何使这项工作的任何想法我将在下面发布大量代码供大家查看提前谢谢 Form.jsx import React from

因此，我尝试将从表单输入的数据发送到电子邮件地址

除了我尝试上传一个文件，它只将path文件的文本发送到电子邮件之外，一切都很正常

例如，电子邮件将如下所示：

发件人：test

电邮：testing@gmail.com

信息：测试

文件：C:\fakepath\2020-06-1018-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

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

mail.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)
})

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 }

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)
})

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 }

const mailer=require（“nodemailer”）；
const getEmailData=（名称、电子邮件、消息、文件）=>{
设data=null；
数据={
发件人：“联系方式”，
收件人：“（*请在此处更正电子邮件*）”，
主题：`来自联系人表单的消息！`，
html:`From:${name}


电子邮件：${Email}


消息：${Message}


文件：${File}`
}
返回数据；
}
const sendmail=（名称、电子邮件、消息、文件）=>{
const smtpTransport=mailer.createTransport({
服务：“Gmail”，
认证：{
用户：“（请在此更正电子邮件）”，
密码：“（请在此更正密码）”
}
})
const mail=getEmailData（名称、电子邮件、消息、文件）
smtpTransport.sendMail（邮件、函数（错误、响应）{
如果（错误）{
console.log（错误）
}否则{
提醒（“谢谢！我们将很快联系！”）
}
smtpTransport.close（）；
})
}
module.exports={sendmail}

我建议您发送一个电子邮件，并在服务器上解析FormData

对于express服务器，您可以使用它来解析请求

在客户端发送表单数据：

const formData=new formData（）；
formData.append（“name”，this.state.name）；
formData.append（“email”，this.state.email）；
formData.append（“message”，this.state.message）；
append（“文件”，this.state.file）；
Axios.post（“api/v1/sendMail”，formData）；

在服务器端，使用请求处理程序中的

directUpload

中间件和

console.log（req.files）

：

const upload=multer({
存储：multer.memoryStorage（）
});
const directUpload=upload.fields([{
姓名：“姓名”
}, {
名称：“电子邮件”
}, {
名称：“消息”
}, {
名称：“文件”
}]);
server.post（“/api/v1/sendMail”），directUpload，（req，res）=>{
控制台日志（请求文件）；
sendEmail（req.body.name、req.body.email、req.body.message、req.body.file）；
});

我建议您发送一个电子邮件，并在服务器上解析FormData

对于express服务器，您可以使用它来解析请求

在客户端发送表单数据：

const formData=new formData（）；
formData.append（“name”，this.state.name）；
formData.append（“email”，this.state.email）；
formData.append（“message”，this.state.message）；
append（“文件”，this.state.file）；
Axios.post（“api/v1/sendMail”，formData）；

在服务器端，使用请求处理程序中的

directUpload

中间件和

console.log（req.files）

：

const upload=multer({
存储：multer.memoryStorage（）
});
const directUpload=upload.fields([{
姓名：“姓名”
}, {
名称：“电子邮件”
}, {
名称：“消息”
}, {
名称：“文件”
}]);
server.post（“/api/v1/sendMail”），directUpload，（req，res）=>{
控制台日志（请求文件）；
sendEmail（req.body.name、req.body.email、req.body.message、req.body.file）；
});

您可以发送或

表单数据

handleSubmit（事件）{
event.preventDefault（）；
//或者您可以将ref设置为form并使用新的FormData（formRef.current）
//但是保持这种状态根本没有意义
const formData=new formData（）；
for（让Object.entries的[key，value]（this.state））{
formData.append（键、值）；
}
Axios.post（“api/v1/sendMail”，formData）
{
提醒（“谢谢！我们将很快联系！”）
}
}

示例

const{Component，Fragment，createRef}=React；
const toBase64=文件=>新承诺（（解决、拒绝）=>{
const reader=new FileReader（）；
reader.readAsDataURL（文件）；
reader.onload=（）=>resolve（reader.result）；
reader.onerror=错误=>拒绝（错误）；
});
类形式扩展组件{
建造师（道具）{
超级（道具）；
此.state={
变量1：{
名称：“”，
电子邮件：“”，
消息：“”，
文件：null，
},
变量2：{
名称：“”，
电子邮件：“”，
消息：“”，
文件：空
}        
};
this.handleChange=this.handleChange.bind（this）；
this.handleSubmit1=this.handleSubmit1.bind（this）；
this.handleSubmit2=this.handleSubmit2.bind（this）；
this.handleFileChange1=this.handleFileChange1.bind（this）；
this.handleFileChange2=this.handleFileChange2.bind（this）；
this.formRef=createRef（null）；
}
handleFileChange1（{target:{name，files}}）{
toBase64（文件[0]）。然后（数据URI=>{
this.setState（state=>({
……国家，
变量1：{
…state.variant1，
[名称]：数据URI
}
}))
})
}
handleFileChange2（{target:{name，files}}）{
此.setState（状态=>({
……国家，
变量2：{
…state.variant2，
[名称]：文件[0]
}
}))
}
handleChange（{target:{name，value}}）{
this.setState（state=>({
……国家，
变量1：{
…state.variant1，
[名称]：值
},
变量2：{
…state.variant2，
[名称]：值
}
}))
}
handleSubmit1（活动）{
常量数据={…th
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

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)
})

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 }